Выравнивание с плавающей точкой CSS не падает

Question

Выравнивание с плавающей точкой CSS не падает

0

Кажется, я не могу заставить свой поплавок вести себя так, как я ожидаю. Я пытаюсь создать четыре панели, например, логотип Windows. Проблема в том, что четвертая панель продолжает оставаться на одном уровне с последним блоком верхнего ряда. Я запускаю это в IIS6 в IE7. Он отлично работает на скрипке ниже, а также на IIS7, но я не могу получить такое же поведение в IIS6. http://jsfiddle.net/9GCrm/

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
#replist
{
    background-color:blue;
    float:left;
    height:250px;
    width:300px;
    margin-right:10px;
    margin-bottom:10px;
    padding:3px;
}
#repedits
{
    background-color:blue;
    float:left;
    height:250px;
    width:300px;
    margin-bottom:10px;
    padding:3px;
}

#mgrslist
{
    background-color:blue;
    height:250px;
    width:300px;
    clear:both;
    float:left;
    margin-right:10px;
    padding:3px;
}
#importdiv
{
    background-color:blue;
    float:left;
    height:250px;
    width:300px;
    padding:3px;
}
</style>
</head>
<body>
<div id="admindiv">
    <div id="replist">

    </div>
    <div id="repedits">

    </div>
    <div id="mgrslist">

    </div>
    <div id="importdiv">

    </div>
</div>
</body>
</html>

steventnorris 31 дек. 2013, в 15:46

Источник

Теги:

html

css

css-float

iis-6

1 ответ

Ещё вопросы

NoobEditor · Accepted Answer · 2013-12-31T11-16-00.000Z

просто удалите clear:both; из #mgrslist и вместо этого добавьте его как отдельный класс, например:

<div id="admindiv">
    <div id="replist"></div>
    <div id="repedits"></div>
    <div class="clr"></div>
    <div id="mgrslist"></div>
    <div id="importdiv"></div>
</div>

демо здесь

Почему это работает? потому что <div class="clr"></div> очистит float для всех <div class="clr"></div> до него, но добавление его в класс будет clear:float только clear:float для этого конкретного класса, а не pre-divs перед этим классом !!

Кроме того, теперь, когда pseudo classes вроде :before и :after exist, лучше использовать их для clear float.
Прочтите эту тему, чтобы понять ее лучше: замените clear: оба с псевдокласс

... Почему это работает, а другой нет? Это просто еще одна проблема IE?
@steventnorris: нет, это не проблема IE ( это не значит, что IE не имеет проблем ;)) ... в любом случае ... обновил часть редактирования ... проверьте, поможет ли это вам !! :)
Так почему бы не добавить clear: и в mgrslist div очищают replist и repedits div, как это делает clr div? Почему этот clr div такой особенный? Это не имеет смысла. Это работает, но, кажется, не имеет смысла.
рад, что вы спросили, проверьте это: stackoverflow.com/questions/16568272/…
Итак, давайте посмотрим, есть ли у меня это: очищенный И плавающий элемент, хотя он может «очиститься», вызывая его падение, не повлияет на высоту, поэтому следующий плавающий элемент падает в соответствии с высотой (помещая его назад в верхнюю строку), хотя элемент, который только очищается, влияет на высоту и добавляет буфер содержимого, тем самым позволяя второй ряд пространства, где будут размещены следующие перемещенные элементы? это кажется немного странным и нелогичным, но, эй, CSS такой, какой он есть.
Вы добавляете clear:both в mgrslist внутри div, а затем добавляете float:left к нему снова, так что это в основном не очищает float от div, оно просто обнуляет их, пока не достигнет следующего float:left line .... добавление clear:both в отдельном div очищают float без назначения нового float Удалите float из mgrslist и он выполняет ту же работу, что и класс clr в fiddle.
давайте продолжим это обсуждение в чате