Подтвердить что ты не робот

Создание 3 Совершенно равных столбцов, которые занимают 100% от ширины окна браузера

У меня есть 3 квадратных изображения того же размера, которые плавают рядом друг с другом. Я хочу, чтобы в целом три изображения охватывали все 100% ширины окна браузера без пробелов. Предоставление каждому изображению ширины 33.33333333% работает в Firefox, но не работает в большинстве других браузеров с определенной шириной, что иногда может оставлять небольшой пробел справа от третьего изображения.

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

4b9b3361

ОТВЕТЫ

Ответ 1

Попробуйте следующее:

HTML

<div class="container">
    <div class="column">
        <img src="http://nssdc.gsfc.nasa.gov/planetary/image/neptune_voy2.jpg" />
    </div>
    <div class="column">
        <img src="http://nssdc.gsfc.nasa.gov/planetary/image/neptune_voy2.jpg" />
    </div>
    <div class="column">
        <img src="http://nssdc.gsfc.nasa.gov/planetary/image/neptune_voy2.jpg" />
    </div>
</div>

CSS

html, body {
    margin:0;
    padding:0;
    width:100%;
    height:100%;
}

.container {
    width:100%;
}

.column {
    width:33.33333333%;
    float:left;
}

.column img {
    width:100%;
    height:auto;
}

Демонстрационный

http://jsfiddle.net/andresilich/2p8uk/

Одностраничная демонстрация

http://fiddle.jshell.net/andresilich/2p8uk/show/

Демо-версия CSS3

html, body {
    margin:0;
    padding:0;
    width:100%;
    height:100%;
}

.container {
    display:-moz-box;
    display:-webkit-box;
    display:box;
    -moz-box-orient:horizontal;
    -webkit-box-orient:horizontal;
    box-orient:horizontal;
    width:100%;
}

.column {
    -moz-box-flex:1;
    -webkit-box-flex:1;
    box-flex:1;
    background-color:#ddd;
}

.column img {
    width:100%;
    height:auto;
}

Демонстрационный

http://jsfiddle.net/andresilich/2p8uk/2/

Одностраничная демонстрация

http://fiddle.jshell.net/andresilich/2p8uk/2/show/

Обновление: (сафари, сортировка, исправление) Safari не равен 33.33% до 100%, как и другие браузеры, вы можете использовать мою демо-версию CSS3, которая автоматически определяет размер с помощью CSS, или вы можете заключить все внутри контейнера с шириной 101% и просто скрыть лишние 1% overflow:hidden; от третьего изображения. Попробуйте следующее:

<div class="container">
    <div class="inner">
        <div class="column">
            <img src="http://nssdc.gsfc.nasa.gov/planetary/image/neptune_voy2.jpg" />
        </div>
        <div class="column">
            <img src="http://nssdc.gsfc.nasa.gov/planetary/image/neptune_voy2.jpg" />
        </div>
        <div class="column">
            <img src="http://nssdc.gsfc.nasa.gov/planetary/image/neptune_voy2.jpg" />
        </div>
    </div>
</div>

html, body {
    margin:0;
    padding:0;
    width:100%;
    height:100%;
}

.container {
    width:100%;
}

.inner {
    width:101%;
    overflow:hidden;
}

.column {
    width:33.33333333%;
    float:left;
}

.column img {
    width:100%;
    height:auto;
}

Демо: http://fiddle.jshell.net/andresilich/2p8uk/4/

Ответ 2

Для тех, кто приходит сюда сейчас (октябрь 2015), вы можете использовать calc:

width:calc(100% / 3);

Это добавит вам ровно 100%. Есть несколько браузеров, но вы можете использовать его без особых проблем: http://caniuse.com/#feat=calc

Ответ 3

Вы пробовали что-то вроде этого...

html, body{
    margin:0;
    padding:0;
}

div{
    float:left;
    height:100px;
    width:33.33%;
    background:red;
    margin:0;
    padding:0;
}

Пример: http://jsfiddle.net/jasongennaro/jQA2Z/

ИЗМЕНИТЬ

Чтобы избавиться от этого очень маленького пространства справа, оберните div и используйте background-color или background-image для компенсации.

div#wrapper{
  height:100px;
  background:red;
}

Пример 2: http://jsfiddle.net/jasongennaro/jQA2Z/1/

Ответ 4

Без Javascript 33.33% всегда будет давать вам и 100% общего количества при добавлении.

Примерно 3,5%. Можете ли вы позволить себе потерять пиксель или два справа?

Или заложите твердый фон (угадайте, что ваш ответ на этот вопрос не будет, но возможен)

Ответ 5

Моя работа для этой проблемы всегда была следующей:

  • Оберните 3 столбца в строке
  • Пусть первые 2 столбца занимают 33.333333% от ширины.
  • Наконец, выберите последний столбец, используя фильтр последнего и распределите ширину 33.333334% (обратите внимание, что вы можете распределить 33.333334% на любой из столбцов - первый с использованием фильтра первого ребенка или второй с помощью nth-child фильтр)

Здесь код HTML/CSS

.row {
	width: 100%;
}
.row .cols {
    width: 33.333333%;
    height: 150px;
    float: left; 
}
.row .cols:last-child {
      width: 33.333334%;
}
<div class="row">
	<div class="cols">lorem</div>
	<div class="cols">lorem</div>
	<div class="cols">lorem</div>
</div>
<div class="row">
	<div class="cols">lorem</div>
	<div class="cols">lorem</div>
	<div class="cols">lorem</div>
</div>

Ответ 6

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

HTML:

<div id="column-wrapper">
    <div class="column left">
    </div>

    <div class="column mid">
    </div>

    <div class="column right">
    </div>

    <div style="clear:both;"></div>
</div>

CSS

#column-wrapper {
    width: 1000px;
}
.column {
    width: 320px;
    float: left;
}
.column.mid {
    margin: 0px 20px;
}

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

Например, если вы хотите сделать макет шириной 800 пикселей, ваши столбцы могут быть, скажем, 250px. Это означает, что все три столбца добавлены вместе равными 750px, оставив вам 50px общего пространства. Итак, разделите 50px на 2, и вы получите 25px, а затем то, что вы положили для вашего левого и правого полей в центральном столбце.

Надеюсь, это имеет смысл, IMO - лучший и более простой способ добиться трех равных столбцов с чистым CSS.