Плавающие две 50% ширины div с запасом 10px между

Я хочу поместить пару разделов жидкости по моей странице, каждая из которых занимает половину своей ширины контейнера, но с разницей в 10 пикселей между ними. Я сделал это JSFiddle http://jsfiddle.net/andfinally/sa53B/5/, и вот HTML:

<div class="clearfix">
    <a class="prev" href="#">Previous</a>
    <a class="next" href="#">Next</a>
</div>

И CSS:

.prev {
    background: black;
    color: white;
    font-size: 16px;
    margin-bottom: 10px;
    display: block;
    float: left;
    box-sizing: border-box;
    width: 50%;
    margin-right: 5px;
}

.next {
    background: black;
    color: white;
    font-size: 16px;
    margin-bottom: 10px;
    display: block;
    float: right;
    box-sizing: border-box;
    width: 50%;
    margin-left: 5px;
}

Правило выбора размера окна недостаточно для выполнения этой работы - divs более 50%. В одном из ответов на этот вопрос кто-то предложил использовать таблицу отображения CSS. Может ли кто-нибудь объяснить, как сделать эту работу в этой ситуации?

Спасибо!

Ответы

Ответ 1

Вы можете: a) опустить 50% в 48% и сделать маржировать 2% или b) использовать CSS3 calc, который не поддерживается везде, но должен быть вариантом в ближайшем будущем. (В частности, когда IE8 отключен от таблицы) (см. http://caniuse.com/#feat=calc для совместимости)

Пример использования процентов: http://jsfiddle.net/sa53B/9/

.prev {
    background: black;
    color: white;
    font-size: 16px;
    display: block;
    float: left;
    box-sizing: border-box;
    width: 48%;
    margin: 0 2% 10px 0
}

.next {
    background: black;
    color: white;
    font-size: 16px;
    display: block;
    float: right;
    box-sizing: border-box;
    width: 48%;
    margin: 0 0 10px 2%
}

Пример использования calc: http://jsfiddle.net/sa53B/6/

.prev {
    background: black;
    color: white;
    font-size: 16px;
    display: block;
    float: left;
    box-sizing: border-box;
    width: 47%;
    width: -webkit-calc(50% - 5px);
    width: calc(50% - 5px);
    margin: 0 5px 10px 0;
}

.next {
    background: black;
    color: white;
    font-size: 16px;
    display: block;
    float: right;
    box-sizing: border-box;
    width: 47%;
    width: -webkit-calc(50% - 5px);
    margin: 0 0 10px 5px;
}

Ответ 2

Маржа добавит ширину ваших контейнеров. Если вы используете ширину, основанную на проценте, вы также должны установить значение маржи в процентах.

Например, если вы хотите два 50% div. Вы также должны учитывать маржу. Для этого вам нужно вычесть маржу из общей ширины. Если вы хотите 1% маржи слева и справа, то в общей сложности 2% вам нужно удалить из общей ширины.

div {
float: left;
width: 48%;
margin: 0 1%;
}

обновленный скрипт: http://jsfiddle.net/sa53B/8/

Ответ 3

Недавно в моей задаче мне нужны два столбца с плавающей запятой с фиксированным запасом 8px между ними.

Итак, я использовал свойства границ и размеров полей без какой-либо магии calc.

Итак, утверждение:

.wrapper__col {
   width: 50%;
   box-sizing: border-box; // used to change box-model
   overfow: hidden; // clearfix hack
}
.wrapper__col:nth-child(odd) {
   float: left;
   border-left: 4px solid transparent;
}

.wrapper__col:nth-child(even) {
   float: right;
   border-right: 4px solid transparent;
}

<div class="wrapper">
   <div class="wrapper__col">1</div>
   <div class="wrapper__col">2</div>
</div>

Ответ 4

То, что вы пытаетесь сделать, не работает с фиксированными полями. Вам нужно рассчитать использование процентных полей.

Размер окна влияет только на прописку и пространство с границами, а не на поле пробела. Таким образом, 50% + 50% = 100% + 5px + 5px > 100%.

Используйте% полей и ваша проблема решена.

Ответ 5

Поздно, но кто-то может быть заинтересован в этом, чтобы исправить:

Оберните элементы, которые вы хотите отобразить в столбцах с div:

<div class="left"><a ....></a></div>
<div class="right"><a ....></a></div>

И просто установите эти стили:

.left {
    float:left;
    width:50%;
}

.right {
    float:right;
    width:50%;
}

Независимо от поля содержимого divs он не будет влиять на ширину 50%. Я использовал этот путь, прежде чем слышать полезный css calc.

См. JSFiddle

Ответ 6

Вот как я это делаю, но он использует переменный разрыв между:

css:

.left {
  float:left;
  width:59%;
  margin-right: 1%;
  background-color:red;
}
.right {
  float:left;
  width:39%;
  margin-left: 1%;
  background-color:blue;
}

HTML:

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

jsfiddle: http://jsfiddle.net/gkmjLfgx/

Ответ 7

Иногда вам нужен одинаковый интервал 10px по горизонтали и по вертикали и по-прежнему иметь столбцы одинакового размера.

Вы можете сделать это, добавив "border-left: 10px solid white" в дополнительный DIV внутри каждого столбца и добавьте "margin-left: -10px" в контейнер столбцов, чтобы съесть границу левого столбца.

скрипка 128psahu