Странные проблемы с границей div при плавании
Вопрос
Могу ли я получить объяснение, почему этот код дает такой результат?И способ исправить это/обойти, если это возможно.
Я не хочу, чтобы div 'z' и 'q' выходили за синюю границу div справа.
Или
Я бы хотел, чтобы div 'x' соответствовал 'z' и 'q', а также выходил за синюю правую границу.
<div style='margin: 5px;width: 653px;border: blue 1px solid;float: left;'>
<div style='margin: 0px; margin-bottom: 5px;width: 100%;border: red 1px solid;/*float: left;*/'>z</div>
<div style='overflow: hidden;margin: 0px; margin-bottom: 5px;width: 100%;border: red 0px solid;/*float: left;*/'>
<div style='margin: 0px; margin-bottom: 0px;width: 300px;border: red 1px solid;float: left;'>y</div>
<div style='margin: 0px; margin-bottom: 0px;width: 300px;border: red 1px solid;float: right;'>x</div>
</div>
<div style='margin: 0px; margin-bottom: 5px;width: 100%;border: red 1px solid;/*float: left;*/'>q</div>
Решение
Через какой браузер вы делали скриншот?Если это IE, то существует проблема с блочной моделью, из-за которой ширина границы игнорируется при вычислении 100% ширины.
Либо вы создаете невидимый контейнер для изменения размера внутреннего div, либо устанавливаете размер внутреннего div в контейнер.ширина -2.
Также попробуйте удалить ширина:100%; из div.
Другие советы
Красная граница на самом деле находится внутри синей границы вашего изображения, но я предполагаю, что вы хотите увеличить поля для контейнеров z и q...
Я взял на себя смелость заключить атрибуты в двойные кавычки и исправить правила стиля, которые были повторно объявлены (маржа и маржа-дно), но прошу прощения за форматирование строк - похоже, я не смог донести это до всех. оставайтесь внутри блока кода на этом форуме, пока я не уберу разрывы строк:
<div style="margin: 5px;width: 653px;border: blue 1px solid;float: left;"><div style="margin: 5px;width: 100%;border: red 1px solid;">z</div><div style="overflow: hidden;margin: 5px;width: 100%;border: red 0px solid;"><div style="margin: 0px;width: 300px;border: red 1px solid;float: left;">y</div><div style="margin: 0px;width: 300px;border: red 1px solid;float: right;">x</div></div><div style="margin: 5px;width: 100%;border: red 1px solid;">q</div>
В этом сценарии ваш дизайн может работать, но может очень легко сломаться, поскольку вы не очистили и не обработали плавающие элементы.
Вы можете обратиться к примеру, который я создал. Я создал рабочую скрипку для решения таких проблем.
http://jsfiddle.net/mayankipsa/e7snvdag/
.floatLeft { float: left;}
.floatRight { float: right;}
.clearBOTH { clear: both; }
.redBorder{border:1px solid red;}
.blueBorder{border:1px solid blue;}
.x,.y{width:49%;margin:1px; }
.z{margin:1px;}
.q{margin:1px;}
<div style='margin: 5px;width: 653px;border: blue 1px solid;float: left;'>
<div style='margin: 0px; margin-bottom: 5px;width: 100%;border: red 1px solid;/*float: left;*/'>z</div>
<div style='overflow: hidden;margin: 0px; margin-bottom: 5px;width: 100%;border: red 0px solid;/*float: left;*/'>
<div style='margin: 0px; margin-bottom: 0px;width: 300px;border: red 1px solid;float: left;'>y</div>
<div style='margin: 0px; margin-bottom: 0px;width: 300px;border: red 1px solid;float: right;'>x</div>
</div>
<div style='margin: 0px; margin-bottom: 5px;width: 100%;border: red 1px solid;/*float: left;*/'>q</div>
</div>
<div class="clearBOTH"></div>
<div class="blueBorder" style="margin-top:50px;">
<div class="z redBorder">z</div>
<div class="redBorder">
<div class="y floatLeft redBorder">y</div>
<div class="x floatRight redBorder">x</div>
<div class="clearBOTH"></div>
</div>
<div class="q redBorder">q</div>
</div>