IE6 / 7 div плавает без проблем ширины при очистке (в родительском div фиксированной ширины) - PullRequest
Новая
       38

IE6 / 7 div плавает без проблем ширины при очистке (в родительском div фиксированной ширины)

0 голосов
/ 28 сентября 2011

HTML: 

<div id="container">
  <div id="div1">div one floats to the left</div>
  <div id="div2">div two floats to the left</div>
</div>

CSS: 

#container{ width:200px; background:gray; }
#div1 { float:left; background:red;}
#div2 { float:left; background:green; clear:left;}

в IE6 / 7:

enter image description here

Примечания:

Я хочу, чтобы ширина дочерних элементов div, таких как # div1 и # div2, была автоматической в ​​зависимости от их содержимого.

Поскольку с inline-block кажется, что высота строки не работает, я использую float.

Я попытался добавить пустой # div после # div1 вместо clear в # div2, и это работает.

Есть ли другое простое решение и в чем ошибка? Ценю вашу помощь.

1 Ответ

2 голосов
/ 28 сентября 2011

Использование вашего решения ...

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

<style>
    #container{ width:200px; background:gray;}
    #div1 { float:left; background:red;}
    #div2 { float:left; background:green; }
</style>


<div id="container">
  <div id="div1">div one floats to the left</div>
  <br style="clear:left" />
  <div id="div2">div two floats to the left</div>
  <br style="clear:left" />
</div>

Если вы не поставите 1-й <br />, то есть 6/7 попытается поместить 2-й дел в оставшееся небольшое пространство.Если вы очистите div, он поместит его на новую строку, но примет ту же длину, что и справа от первого div.

На мой взгляд, ваше решение достаточно хорошее и достаточно простоеВы можете пойти с этим.В противном случае есть 2 варианта:

Альтернатива 1

Встроенные блоки работают ... если вы используете неблокированный элемент для начала (не знаю точно, почему). 

<style>
    #container{ width:200px; background:gray;}
    #div1 {  background:red; display:inline-block; line-height:30px;}
    #div2 { background:green; display:inline-block;width:auto; }
</style>
<div id="container">
  <span id="div1">div1</span>
  <span id="div2">div2 doesnt float blablabla</span>
</div>

Альтернатива 2

Использовать таблицы (не очень хорошо, но все же, это работает!) 

<style>
    #container{ width:200px; background:gray;}
    #div1 {  background:red;}
    #div2 { background:green; }
</style>
<div id="container">
  <table><tr><td id="div1">div one floats to the left</td></tr></table>
  <table><tr><td id="div2">div two floats to the left</td></tr></table>
</div>
...