Высота контейнера для контейнеров CSS. Вопросы с плавающей DIV

Question

Можете ли вы выставить высоту контейнера DIV для размещения двух плавающих детей? Могу ли я использовать эту приманку? Я пытаюсь сделать два одинаковых размера div внутри родительского div. Я бы хотел, чтобы они появлялись рядом друг с другом с небольшим пробелом между ними. Child2 имеет тенденцию выскакивать и опускаться ниже Child1. Примечание. Child2 содержит таблицу. Должен ли я плавать?

HTML:

<div id="parent"> 
    <div id="child1"></div> 
    <div id="child2"> 
    <table><tr><td>content</td></tr></table> 
</div> 
</div> 

CSS:

div#parent 
{ 
    background-color: #C6E4E0; 
    border: solid 3px #017E6F; 
    font-family: Arial; 
    font-size: 10pt; 
    font-weight: bold; 
    padding-left: 5px; 
    padding-right: 5px; 
    width:99%; 
} 

div#parent div 
{ 
    width:49%; 
    float:right; 
    padding:3px; 
} 

div#parent div:first-child 
{ 
    float:left; 
} 

Answer 1

#container { width:200px; } 
.floated { width:100px; float:left; } 
.clear  { clear:both; } 

<div id="container"> 
    <div class="floated">A</div> 
    <div class="floated">B</div> 
    <div class="clear"></div> 
</div> 

Answer 2

Я не поклонник clear: both;, я предпочел бы сделать это в примере Джонатан Sampsons:

#container { width:200px; overflow: hidden; } 
.floated { width:100px; float:left; } 

 

<div id="container"> 
    <div class="floated">A</div> 
    <div class="floated">B</div> 
</div> 

Answer 3

Кстати, вы хотите

div#parent > div { float:left; }

вместо

div#parent div:first-child { float:left; }

, который до сих пор не IE6 дружелюбен, но он будет плавать как ребенка DIVs.

Answer 4

Я использую класс clearfix.

.clearfix:after { 
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden; 
} 

.clearfix { 
    display: inline-block; 
} 

/* Hides from IE-mac \*/ 
/** html .clearfix {height: 1%;}*/ 

.clearfix { 
    display: block; 
} 

/* End hide from IE-mac */ 

затем просто используйте класс в каждом контейнере с плавающим элементом.

Answer 5

Это не проблема с проблемой clearfix, его проблема в том, что его два плавающих divs не появляются бок о бок.

Прежде всего, вам не нужно устанавливать ширину родительского div, divs - это элементы блока, что означает, что они автоматически регулируют свою ширину, чтобы охватить всю ширину своего родителя (в данном случае, предположительно, родителя div # parent - это тело).

Поскольку вы произвольно устанавливаете ширину и даете ей отступы, она может потенциально расширить BEYOND тело. Это не имеет особого значения, но если вы применяете это же знание к дочерним плавающим divs, и вы можете понять, почему правильный может наткнуться на дно.

Во-первых, если вы явно устанавливаете ширину divs в процентах, вам не нужно добавлять заполнение. Поскольку вы имеете дело с процентной шириной, лучше добавить дополнение к содержимому div, а не к самим div, потому что добавление ADDED равно ширине. Поэтому, если вы добавили отладку 10px в div с шириной 49% в родительском 100px, она имела бы ширину 49px + 10px + 10px (2 стороны) для общей расчетной ширины 69px.

Поскольку вы не размещали свою разметку и контент или какой браузер, в котором вы тестируете, я не могу точно сказать, почему сбивается div. Возможны две возможности.

1. Вы используете IE, который позволяет таблицам выходить за пределы своего родительского div, что приведет к поломке. Попробуйте явно установить ширину таблицы в процентах от ее родителя или что-то в этом роде.
2. Ширина 49% + отступы = больше, чем [parent-width] - [left-div-width]. Это заставит его столкнуться, потому что левый div и правый div слишком широки для родительской ширины.