не допускать переноса плавающих элементов

Question

<style>
.header {
    float:left;
    width:50%;
    border:1px solid black;
}
</style>

<div style="width:100%;">
    <div class="header">Hello</div>
    <div class="header">World</div> 
</div>

Я хочу, чтобы два внутренних элемента div выглядели рядом друг с другом, идеально вписываясь в родительский элемент.Это происходит, когда на них не установлена ​​граница, но когда я устанавливаю границу, второй div оборачивается и появляется ниже.Как мне этого избежать?

Answer 1

Причина, по которой это происходит, заключается в том, что 50% x 2 уже составляет 100%. Границы размером 2 пикселя составляют ширину 100% + 4 пикселя. Чтобы отменить это, используйте отрицательные поля 1px с обеих сторон.

Демо: http://jsfiddle.net/rfSMX/1/

Вы можете столкнуться с проблемой 100% комбинированной ширины в IE .

Answer 2

По сути, происходит то, что ваши div имеют размер 50% + 2 пикселя (по одному на каждую границу) в ширину.Поскольку (50% + 2 пикселя) * 2 шире, чем ваш 100% -й контейнер, это заставляет float обернуться.

Применение поля в -1 пиксель к левой и правой сторонам ваших .header div'ов должно помочь.

Answer 3

Это может сработать:

</p> <p>

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

Answer 4

Добавьте дополнительный div внутри div, для которого нужна граница, называемая header-inner.

<style>
.header {
    float:left;
    width:50%;
}
.header-inner {
    padding: 10px;
    border: 1px solid #ccc;
}
</style>

<div style="width:100%;">

    <div class="header"><div class="header-inner">
        Hello
    </div></div>

    <div class="header"><div class="header-inner">
        World
    </div></div>

</div>