Как разместить по 2 div со свойством float в контейнере

397

28 декабря 2017, 23:11

У меня есть контейнер к примеру размером 480

Есть внутри четыре блока. размером 230 в ширину, и margin-right:20px;

Мне нужно сделать так что бы эти элементы раместились по 2 в ряд в родительском контейнере.

P.S мне не нужно предлагать устанавливать в цикле margin-right:0 при условие $i % 2 ! так как этот вопрос для меня важно решить путем css

Кстати, возможно есть другой способ сделать то что мне надо. Мне по сути надо разместить элементы (div размером 230) внутри контейнера 480 так, что бы между элементами был отступ 20 пикс.

Answer 1

div.parent{ 
  width: 480px; 
} 
div.child{ 
  width: 230px; 
  margin: 0 10px 0 0; 
  background: red; 
  float: left; 
} 
div.child:nth-child(2n+2){ 
  margin: 0 0 0 10px; 
  background: yellow; 
}

<div class="parent"> 
  <div class="child">1</div> 
  <div class="child">2</div> 
</div>

Как-то так ))

Answer 2

.parent {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -webkit-flex-direction: row;
    -moz-flex-direction: row;
    -ms-flex-direction: row;
    -o-flex-direction: row;
    flex-direction: row;
    justify-content: space-between;
    -ms-align-items: center;
    align-items: center;
    width: 480px;
}
.child {
    width: 230px;
    text-align: center;
    background: #547bd1;
}

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

Или как-то так))

Answer 3

Или так

.parent {
  margin-right: -10px;
  margin-left: -10px;
  width: 480px;
}
.child {
  padding-left: 10px;
  padding-right: 10px;
  float: left;
  width: 230px;
  text-align: center;
  background: #547bd1;
}
<div class="parent">
  <div class="child">left</div>
  <div class="child">right</div>
</div>