Umieścić odstępy między elementami div w poziomym rzędzie?

Question

Mam 4 elementy div w poziomym rzędzie. Chcę umieścić spację między elementami div (przy użyciu marginesu, tak myślę?), Ale elementy div przepełniają kontener macierzysty, gdy to robię.

Z marginesem zerowym, oni wyrównać ładnie w jednym wierszu:

<div style="width:100%; height: 200px; background-color: grey;"> 
 
    <div style="width: 25%; float:left; margin: 0px; background-color: red;">A</div> 
 
    <div style="width: 25%; float:left; margin: 0px; background-color: orange;">B</div> 
 
    <div style="width: 25%; float:left; margin: 0px; background-color: green;">C</div> 
 
    <div style="width: 25%; float:left; margin: 0px; background-color: blue;">D</div> 
 
</div>

Teraz, kiedy wprowadzenie marginesu 5px, ostatni guzik Okłady:

<div style="width:100%; height: 200px; background-color: grey;"> 
 
    <div style="width: 25%; float:left; margin: 5px; background-color: red;">A</div> 
 
    <div style="width: 25%; float:left; margin: 5px; background-color: orange;">B</div> 
 
    <div style="width: 25%; float:left; margin: 5px; background-color: green;">C</div> 
 
    <div style="width: 25%; float:left; margin: 5px; background-color: blue;">D</div> 
 
</div>

Sądzę, że dzieje się tak dlatego, że atrybut szerokości, gdy jest wartością procentową, nie uwzględnia marginesu dla całkowitej szerokości elementu? Jak to zrobić?

Dzięki

Answer 1

Możliwym pomysłem byłoby:

1. usunąć width: 25%; float:left; od stylu swoimi div
2. owinąć każdy z czterech kolorowych div w div, który ma style="width: 25%; float:left;"

Zaletą tego podejścia jest to, że wszystkie cztery kolumny będą miały jednakową szerokość i luki między ich zawsze będzie 5px * 2.

Oto jak to wygląda:

.cellContainer { 
 
    width: 25%; 
 
    float: left; 
 
}

<div style="width:100%; height: 200px; background-color: grey;"> 
 
    <div class="cellContainer"> 
 
    <div style="margin: 5px; background-color: red;">A</div> 
 
    </div> 
 
    <div class="cellContainer"> 
 
    <div style="margin: 5px; background-color: orange;">B</div> 
 
    </div> 
 
    <div class="cellContainer"> 
 
    <div style="margin: 5px; background-color: green;">C</div> 
 
    </div> 
 
    <div class="cellContainer"> 
 
    <div style="margin: 5px; background-color: blue;">D</div> 
 
    </div> 
 
</div>

Answer 2

Proponuję czyniąc div s nieco mniejsze i dodanie marginesu procentach.

<div style="width:100%; height: 200px; background-color: grey;"> 
 
    <div style="width: 23%; float:left; margin: 1%; background-color: red;">A</div> 
 
    <div style="width: 23%; float:left; margin: 1%; background-color: orange;">B</div> 
 
    <div style="width: 23%; float:left; margin: 1%; background-color: green;">C</div> 
 
    <div style="width: 23%; float:left; margin: 1%; background-color: blue;">D</div> 
 
</div>

http://jsfiddle.net/YJT7q/

Answer 3

To dlatego width gdy pod warunkiem % nie uwzględnia padding/margin s. Konieczne będzie zmniejszenie kwoty do prawdopodobnie 24% lub 24.5%. Gdy to zrobisz, powinieneś być dobry, ale będziesz musiał podać różne opcje oparte na rozmiarze ekranu, jeśli chcesz, aby to zawsze działało poprawnie, ponieważ masz zakodowany margines, ale względny rozmiar.

Answer 4

Można ustawić lewy margines dla li znaczników w procentach i ustawić ten sam negatywny lewy margines na nadrzędny:

ul {margin-left:-5%;} 
 
li {width:20%;margin-left:5%;float:left;}

<ul> 
 
    <li>A 
 
    <li>B 
 
    <li>C 
 
    <li>D 
 
</ul>

http://jsfiddle.net/UZHbS/

Answer 5

sporo sposobów apprach ten problem.

Użyj właściwości rozmiaru pudełka css3 i zasymuluj marginesy z ramkami.

http://jsfiddle.net/Z7mFr/1/

div.inside { 
width: 25%; 
float:left; 
border-right: 5px solid grey; 
background-color: blue; 
box-sizing:border-box; 
-moz-box-sizing:border-box; /* Firefox */ 
-webkit-box-sizing:border-box; /* Safari */ 
} 

<div style="width:100%; height: 200px; background-color: grey;"> 
<div class="inside">A</div> 
<div class="inside">B</div> 
<div class="inside">C</div> 
<div class="inside">D</div> 
</div> 

Zmniejszenie odsetka swoich elementów szerokościach i dodać trochę margin-right.

http://jsfiddle.net/mJfz3/

.outer { 
width:100%; 
background:#999; 
overflow:auto; 
} 

.inside { 
float:left; 
width:24%; 
margin-right:1%; 
background:#333; 
} 

Answer 6

Inny pomysł: Kompensacja dla marginesu po przeciwnej stronie div.

Dla strony z odstępami, które chcesz uzyskać jako przykład: 10 pikseli, a dla strony przeciwnej, skompensuj -10 pikseli. Mi to pasuje. Prawdopodobnie nie będzie to działać we wszystkich scenariuszach, ale w zależności od układu i odstępów między innymi elementami, może działać świetnie.

Answer 7

Umieść wszystkie elementy div w poszczególnych komórkach tabeli i ustaw styl tabeli na padding: 5px;.

E.g.

<table style="width: 100%; padding: 5px;"> 
 
<tbody> 
 
<tr> 
 
<td> 
 
<div style="background-color: red;">A</div> 
 
</td> 
 
<td> 
 
<div style="background-color: orange;">B</div> 
 
</td> 
 
<td> 
 
<div style="background-color: green;">C</div> 
 
</td> 
 
<td> 
 
<div style="background-color: blue;">D</div> 
 
</td> 
 
</tr> 
 
</tbody> 
 
</table>