Largeur et rembourrage relatifs sur le même élément - design web réactif

Dans un effort pour rendre mes sites web plus réactifs, j'essaie d'apprendre à définir les éléments de manière fluide. Aujourd'hui, je suis tombé sur une situation que j'ai finalement résolu, mais je ne comprends pas pourquoi la solution a fonctionné, et j'aimerais le faire.Largeur et rembourrage relatifs sur le même élément - design web réactif

Je ne peux pas créer un lien vers le site (NDA), mais je l'ai mis quelques exemples de pages avec les éléments en question:

MAL: http://cruxwire.com/wrong.html DROIT: http://cruxwire.com/right.html

Ce que j'est trois divs flottaient à gauche. J'essaie d'ajouter un remplissage (en pourcentage) et j'utilise target/context = result, puis * 100 (parce que c'est un pourcentage.)

Ma copie de Responsive Web Design par Ethan Marcotte dit " Lorsque vous définissez un remplissage flexible sur un élément, votre contexte est la largeur de l'élément lui-même. " J'ai donné aux divs une largeur de 20%. Puisque l'élément parent est 945px, la largeur en pixels de chaque div est de 189px. Je voulais ajouter un padding de 20px, donc 20/189 = 0.1058201058201058. J'ai ajouté un rembourrage à chaque div de 10.58201058201058%.

Cela finit par donner à chaque div un remplissage de 100px, pas 20px. J'ai finalement réalisé que le rembourrage était calculé en fonction de la largeur de l'élément parent, et non du div lui-même.

Ma solution était de mettre un div supplémentaire autour de chaque div existant, pour que je puisse appliquer la largeur à l'un et le rembourrage à l'autre, et qui a résolu le problème ..

J'ai deux questions:

Pourquoi le remplissage est-il calculé par rapport à son élément parent plutôt qu'à son propre élément?

Comment puis-je faire cela sans avoir à ajouter les divs supplémentaires?

Vous pouvez voir le code sur les pages liées à dans ce post, et je l'ai ajouté ci-dessous aussi bien.

Merci, Kim

MAL:

<!DOCTYPE html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>WRONG</title> 
<style> 
#main { width:945px; margin:0 auto; padding:40px 0; background-color:blue; } 
#slideshow { background-color:green; } 
.threecolumn { float:left; width:20%; padding:10.58201058201058%; background-color:yellow; } /* 20px/189px */ 
.slide { position:relative; margin:0 1%; background-color:red; } 
p { background-color:white; margin:0; padding:0; } 
</style> 
</head> 
<body> 

<div id="main"> 
    <div id="slideshow"> 
     <h1>WRONG</h1> 
     <div class="threecolumn slide"> 
      <p>According to Firebug, this element has 100px padding.</p> 
     </div> 
     <div class="threecolumn slide"> 
      <p>According to Firebug, this element has 100px padding.</p> 
     </div> 
     <div class="threecolumn slide"> 
      <p>According to Firebug, this element has 100px padding.</p> 
     </div> 
     <div style="clear:both;"></div> 
    </div> 
</div> 
</body> 
</html>

DROIT:

<!DOCTYPE html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>RIGHT</title> 
<style> 
#main { width:945px; margin:0 auto; padding:40px 0; background-color:blue; } 
#slideshow { background-color:green; } 
.threecolumn { float:left; width:20%; margin:0 1%; background-color:yellow; } 
.slide { position:relative; padding:10.58201058201058%; background-color:red; } /* 20px/189px */ 
p { background-color:white; margin:0; padding:0; } 
</style> 
</head> 
<body> 

<div id="main"> 
    <div id="slideshow"> 
     <h1>RIGHT</h1> 
     <div class="threecolumn"> 
      <div class="slide"> 
       <p>According to Firebug, this element has 20px padding.</p> 
      </div> 
     </div> 
     <div class="threecolumn"> 
      <div class="slide"> 
       <p>According to Firebug, this element has 20px padding.</p> 
      </div> 
     </div> 
     <div class="threecolumn"> 
      <div class="slide"> 
       <p>According to Firebug, this element has 20px padding.</p> 
      </div> 
     </div> 
     <div style="clear:both;"></div> 
    </div> 
</div> 

</body> 
</html>

Source

2011-07-18 cruxwireweb

Le modèle de boîte de W3 inclut le rembourrage dans la largeur calculée. Qu'est-ce que vous voulez vraiment faire est envelopper le contenu qui désirent le rembourrage dans un autre div, et appliquer une marge à cette div qui équivaut au rembourrage que vous ne pouvez pas utiliser:

Exemple HTML:

<div id="nav"> 
    <div class="block" id="left"> 
     <div> 
      <h1>blah blah</h1> 
     </div> 
    </div> 
    <div class="block" id="middle"> 
     <div> 
      <h1>blah blah</h1> 
     </div> 
    </div> 
    <div class="block" id="right"> 
     <div> 
      <h1>blah blah</h1> 
     </div> 
    </div> 
</div>

Exemple CSS:

.block { 
    width:33%; 
    height:50%; 
    position:relative; 
    float:left; 
    background-color:#CCC; 
    /** Instead of applying a 20px padding here... */ 
} 

.block>div { 
    margin:20px; /* we apply a 20px margin here */ 
}

http://jsfiddle.net/AlienWebguy/Yf34X/1/

Source

2011-07-18 00:34:20 AlienWebguy

Raison de la downvote? – AlienWebguy

Vous avez raison en supposant que la cible/contexte = résultat, mais cela inclut la largeur, le rembourrage et marge de l'élément.

J'ai fait une codepen afin que vous puissiez voir comment cela fonctionne - http://codepen.io/justincavery/pen/dtusa

Vous n'avez pas besoin d'ajouter le div supplémentaire, il suffit de suivre les règles de la cible et du contexte mais rappelez-vous le contexte est le parent conteneur, pas l'élément actuel, quand il s'agit de padding et les marges.

.wrapper { 
    margin: 0 auto; 
    width: 1000px; 
} 
#main { 
    width:100%; 
    padding:40px 0; 
    background-color:blue; 
    float:left 
    } 
.pixeled { 
    float:left; 
    background-color:green; 
    width: 400px; 
    margin: 25px; 
    padding: 25px; 
} 
.percentaged { 
    float:left; 
    width:40%; 
    padding:2.5%; 
    background-color:yellow; 
    margin:2.5%; 
} 


<div class="wrapper"> 
<div id="main"> 
    <div class="pixeled"> 
     <div class="inner"> 
    This is content 
    </div>  
    </div> 
    <div class="percentaged"> 
    <div class="inner"> 
    This is conent 
    </div> 
    </div> 
</div> 

</div>

Source

2013-01-31 07:35:58 justinavery

Voici une façon de le faire sans avoir à ajouter les divs supplémentaires:

Vous voulez que le rembourrage soit environ 20px. Par conséquent, 20 pixels sur une largeur totale de 945 pixels = 20/945 x 100 = 2.116402116%

Par conséquent, si vous utilisez ce pourcentage dans votre «mauvais» code d'origine au lieu de 10,58%, vous obtiendrez le effet. Voici le code que vous avez fourni pour votre "mauvais" exemple, juste avec le CSS modifié.

CSS:

#main { 
width:945px; 
margin:0 auto; 
padding:40px 0; 
background-color:blue; 
} 
#slideshow { 
background-color:green; 
} 
.threecolumn { 
float:left; 
width:20%; 
padding:2.116402116%; /*<<<<<<<<padding is 20px/945px*/ 
background-color:yellow; 
} 
.slide { 
position:relative; 
margin:0 1%; 
background-color:red; 
} 
p { 
background-color:white; 
margin:0; 
padding:0; 
}

HTML:

<div id="main"> 
    <div id="slideshow"> 
     <h1>WRONG</h1> 
     <div class="threecolumn slide"> 
      <p>According to Firebug, this element has 100px padding.</p> 
     </div> 
     <div class="threecolumn slide"> 
      <p>According to Firebug, this element has 100px padding.</p> 
     </div> 
     <div class="threecolumn slide"> 
      <p>According to Firebug, this element has 100px padding.</p> 
     </div> 
     <div style="clear:both;"></div> 
    </div> 
</div>

Source

2013-12-30 11:36:14 starky

voir cette modification du remplissage% à http://jsfiddle.net/Yf34X/54/ – starky

Largeur et rembourrage relatifs sur le même élément - design web réactif

Répondre

Questions connexes