Гибкая компоновка CSS и границы

Ответ 1

См. в этой статье.

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

В 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
}

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

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

Ответ 2

Поместите только 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 (возможно, даже сократить общее количество divs, сделав это, просто помните, что вы не можете пропустить самый верхний div без завинчивания по ширине).

Ответ 3

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

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

Установите общую ширину для каждого дочернего div с левым положением в нужную фракцию (используя% для левого или правого поля или отступов), чтобы они равны @100%. Идите вперед и установите 1px границу справа на дочерние div. Для последнего 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, так как вы увидите несколько пикселей фона.)

Ответ 4

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

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

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

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

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

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