Флюид CSS макет и границы

Question

Как при проектировании макета с текучей средой вы используете границы, не разрушая макет.

В частности, у меня есть HTML-виджет, который состоит из пяти элементов. Я бы хотел, чтобы пять дивов заняли всю комнату в сдерживающем элементе. Я также хотел бы иметь границу в 1 пиксель вокруг каждого.

Я пытался: .box {float: left; высота: 100%; ширина: 100%; граница: 1px сплошной красный; } Это не сработает: будет добавлено 10 пикселей в ширину, что приведет к оборачиванию ящиков. Уменьшение процента ширины не работает, так как оно не будет занимать правильное количество места и для определенных размеров страницы будет по-прежнему переноситься.

Как правильно управлять взаимодействием между этими элементами?

Answer 1

См. эту статью .

По сути, в "традиционной" блочной модели CSS ширина элемента блока задает только ширину содержимого блока, исключая его границу (и отступ).

В CSS3 вы можете переключиться на другую блочную модель следующим образом:

box-sizing: border-box;

Специфичные для браузера реализации этого:

-moz-box-sizing: border-box; // for Mozilla
-webkit-box-sizing: border-box; // for WebKit
-ms-box-sizing: border-box; // for IE8

Это приведет к тому, что размеры ячеек будут включать границу элемента и отступы. Теперь вы можете указать

.box { 
   box-sizing: border-box;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   -ms-box-sizing: border-box;
   width:20%;
   border:1px solid red;
   float:left
}

и пусть пять элементов div занимают всю ширину содержащего элемента без переноса.

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

Answer 2

О, мальчик, я почти не хочу упоминать об этом, но есть очень простой способ сделать это на турнике. Он не «идеален по пикселям», кроме как при минимальной ширине, но не различим невооруженным глазом.

Разделите контейнер div на количество предметов. Допустим, у вас есть шесть элементов навигации с белой рамкой (это особенно хорошо для чисел, которые не делятся на 100, потому что в любом случае они не будут идеальными).

Установите общую ширину для каждого дочернего элемента div с правильной дробью (используя% для левого или правого поля или отступа), чтобы они равнялись @ 100%. Идите вперед и поместите границу в 1 пиксель справа от дочерних элементов. Для последнего div в правом конце создайте второй класс без рамки или просто используйте style = 'border: none'.

Затем при минимальной ширине медленно уменьшайте ширину каждого дочернего элемента div до тех пор, пока он не уместится.

Вот фрагмент кода со старой моей страницы, использующий этот метод для жидкой страницы с минимальной шириной 960px (958 px и граница 1px на каждой стороне):

.navitem {
width: 16.57%;
height: 35px;
float: left;
text-align: center;
font: 1em/35px arial,sans-serif;
border-right: 1px solid #eee;
margin: 0 auto 0 auto;
padding: 0;
}

Я думаю, что на самом деле он настолько близок к идеальному пикселю, насколько вы можете получить при минимальной ширине и при более высокой ширине, хотя правый div может быть на 4 пикселя шире, чем другие, вы не можете сказать, глядя на него. (Очевидно, что это не сработает, если вам нужна правая граница на самом правом div, так как вы увидите несколько пикселей фона.)

Answer 3

Только поместите width: 100% в самый внешний div и не ставьте границу. Если вы сделаете это, то внутренние поля будут заполнять пространство (при условии, что вы не перемещали их или что-либо еще), поскольку они являются блочными элементами, и вам не придется беспокоиться о добавлении границ к общему размеру.

Если вам действительно нужно появление пяти сплошных однопиксельных вложенных границ, вы можете сделать что-то вроде этого (с правильными семантическими именами, надеюсь):

<div class="one">
    <div class="two">
        <div class="three">
        etc.
        </div>
    </div>
</div>

<style>
.one {
    width: 100%;
}
.two {
    border: 1px solid red;
    padding: 1px;
    background: red;
}
.three {
    border: 1px solid red;
    background: white;
}
</style>

Как вы можете видеть, вы можете подделать вторую границу, используя отступы и цвета фона на втором div (может даже сократить общее количество div, выполнив это; просто помните, что вы не можете дополнить самый крайний div без прикручивания до вашей ширины).

Answer 4

Это позволит вам довольно близко, но не 100% пути (каламбур). Чтобы придать элементу 100% высоты, нужно знать «100% чего?». Все родительские элементы также должны иметь высоту 100%, включая тело. Или, как выразился W3C: «Если высота содержащего блока не указана явно (то есть зависит от высоты содержимого), и этот элемент не является абсолютно позиционированным, значение вычисляется как« auto »». Как вы можете видеть, нам также нужно дать телу «положение: абсолютное»; для высоты, чтобы быть в чести. Этот пример также делит ширину на пять равных столбцов с границами (и некоторые отступы и поля просто для удовольствия):

<style>
body {
width: 100%;
height: 100%;
margin: 0;
position: absolute; 
/* overflow: hidden; */
}
div.section {
float: left;
width: 19.95%;
height: 100%;
}
    div.column {
    height: 100%;
    border: 1px solid blue;
    margin: 1em;
    padding: 2em;
    }
</style>

<div class="section"><div class="column">one</div></div>
<div class="section"><div class="column">two</div></div>
<div class="section"><div class="column">three</div></div>
<div class="section"><div class="column">four</div></div>
<div class="section"><div class="column">five</div></div>

Как вы можете видеть, когда вы проверяете это, у нас нет проблем с остроумием. Это потому, что «разделы», которые делят ширину, не имеют отступов, полей или границ. Таким образом, ширина, которую мы установим, будет шириной, которую они занимают на экране. Это не совсем верно на практике. Я на самом деле установил ширину 19,95%, а не ожидаемые 20%. Проблема в том, что некоторые браузеры (IE для одного) имеют ошибку округления при суммировании процентов и чем больше подразделений для сложения, тем больше ошибка.

Там, где этот метод явно не работает, когда дело доходит до высоты. В отличие от "width: auto;", которое заставит div занимать доступное горизонтальное пространство, "height: auto;" только сделает div таким же высоким, как и его содержимое. Вы должны указать «высота: 100%;» чтобы получить div для заполнения высоты окна, но, увы, при добавлении полей, отступов и границ визуализированная высота div становится больше области просмотра, что приводит к вертикальной полосе прокрутки.

Здесь я действительно могу видеть только два варианта; Либо 1) принять, что div не совсем заполняют высоту окна и установить их высоту, возможно, 80% или 2) пропустить нижнюю границу и установить тело на «переполнение: скрыто;», который будет обрезать части Дивы, которые выходят за край окна.

Наконец, конечно, вы также можете использовать несколько простых сценариев для достижения того, что вам нужно. Не должно быть очень сложно, но это вопрос с другим тегом ... Удачного кодирования!