Странные проблемы с границами div при перемещении - PullRequest
Новая
       11

Странные проблемы с границами div при перемещении

3 голосов
/ 30 апреля 2009

Могу ли я получить объяснение того, почему этот код дает результат, который он делает? И способ исправить это / обойти это, если это возможно.

Я не хочу, чтобы 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>

Ответы [ 3 ]

1 голос
/ 30 апреля 2009

Через какой браузер вы создали скриншот? Если это IE, есть проблема с блочной моделью, которая заставляет игнорировать ширину границы при вычислении 100% ширины.

Либо вы создаете невидимый контейнер для определения размера внутреннего элемента div, либо размера вашего внутреннего элемента div для container.width -2.

Также попробуйте удалить ширину : 100%; из элементов div.

0 голосов
/ 03 апреля 2015

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

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

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>
0 голосов
/ 30 апреля 2009

Красная граница на самом деле находится внутри синей рамки на вашем изображении - но я предполагаю, что вы хотите увеличить поля для контейнеров z и q ...

Я взял на себя смелость заключить атрибуты в двойные кавычки и исправить правила стилей, которые были повторно объявлены (margin и margin-bottom) - но извинения за форматирование строки - я не мог получить все это остается внутри блока кода на этом форуме, пока я не уберу разрывы строк: 

<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>
...