Простой способ использования полной ширины браузера (CSS Отзыввая конструкция)

Question

3 div. край тела 10px.

Изображения на нижнем

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

---

Вот что я сделал с помощью pourcentage и что я считаю:

" полный братан Ширина Wser составляет 100%

Если рентабельность DIV являются 10px и рентабельность тела являются 10px затем

Ширина DIV была бы примерно на 30%.

Давайте попробуем 30%.

Он подходит - пустое место тоже.

Давайте попробуем 30,5%.

Пустое пространство, оно не равно по бокам.

Положим 32%.

и т.д. "

---

но часто я получаю дополнительное пустое пространство справа, или один DIV идти вниз, потому что это на самом деле слишком широко.

Есть ли более простой способ сделать ? это свойство

Спасибо

Дизайн:.

Медиа запросы:

Answer 1

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

У вас есть (по крайней мере) два варианта здесь:

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

С другой стороны, если вам действительно нужны поля, чтобы быть абсолютной ширины пикселя, используйте CSS calc:

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

Например:

width: calc(33.333% - 20px);

будет стилизовать div занять одну треть ширины экрана, минус ширину 10px края на левом и 10px полях справа.

Если у всех трех div s указанная ширина, общее занимаемое пространство будет равно 100% экрана с пространством для всех учетных записей.

(если вы хотите, первый и последний дивы не иметь запас на левый и правый соответственно, просто изменить расчет, чтобы соответствовать!)

More Information About 'Calc'

---

Extra наконечник! Помните, что пробел в вашем коде добавит пробелы между вашими элементами, поэтому, если вы нарисуете все, чтобы заполнить ровно 100% ширину, эти дополнительные пробелы могут по-прежнему приводить к нарушению ваших позиций, если вы не имели дело с этим

Answer 2

Я бы сказал, что лучший способ приблизиться к этому, это есть элементы контейнера для каждого DIV, так что структура, как это:

<div class="container-full"> 
    <div class="container-third"> 
     <div class="content"> 
     Hello world 
     </div> 
    </div> 
</div> 

.container-full{ 
    width: 100%; 
} 
.container-third{ 
    width: 33.33%; 
    padding: 10px; 
} 
.content{ 
    width: 100%; 
} 

Используйте отступы, вместо маржи. Обязательно используйте box-sizing: border-box

Answer 3

display:flex уже широко поддерживается, поэтому вы можете полагаться на это, а не на поплавки. , если вы не используете box-sizing:border-box; для всех элементов - вы могли бы по крайней мере для рассматриваемых разделов вместе с дополнением 10px. Здесь идет дерзость:

.container { 
    display:flex; 
    & > div{ 
     flex:0 0 33.33%; 
     padding: 10px; 
     box-sizing: border-box; 
    } 
} 

или вы могли бы использовать процентную маржу между дивами.

.container div{ 
    width:30%; 
    float:left; 
    margin-right:5%; 
} 
.container div:last-child{ 
    margin-right:0; 
}