как укладывать несколько DIV по горизонтали

Question

Я хочу сложить некоторые div по горизонтали, но не могу понять, как. Мне также нужно иметь возможность сложить дочерний элемент вертикально, и я не знаю, как это сделать с помощью Flex. Пример:

.child {border: 1px solid orange}

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

Мне нужна та же функциональность, что и ROW и COL в Bootstrap, где вы можете определить

<div class="row">
    <div class="col-md-4">1</div>
    <div class="col-md-4">2</div>
    <div class="col-md-4">3</div>
</div>

если экран меньше контрольной точки MD, div складывается вертикально.

Answer 1

Используйте обертку flexbox и установите ширину .child на 50%. Используйте box-sizing : border-box, чтобы включить ширину границы в 50% ширины дочернего элемента.

Теперь вы можете установить родителя на любую желаемую ширину, и дети будут следовать.

* {
  box-sizing: border-box;
}

.parent {
  display: flex;
  flex-wrap: wrap;
}

.child {
  width: 50%;
  border: 1px solid orange;
}

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

Answer 2

Если я правильно понял вопрос, вы можете использовать float.

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

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

.parent {
  float: left
}

.child {
  width: 100px;
  height: 100px;
  background: red;
  margin: 10px;
}

и скрипка: https://jsfiddle.net/8opzLqu9/6/

Упс, просто перечитайте вопрос. По сути, вы устанавливаете дочерний div как встроенный блок (как прокомментировали люди). Вот так:

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

.parent {
  width: 500px;
}

.child {
  display: inline-block;
  width: 150px;
  height: 100px;
  background: red;
  margin: 10px;
}

Fiddle

Answer 3

Надеюсь, это может помочь.

.child {
  border: 3px solid orange;
  display: inline-block;
  width: 200px;
  height: 40px;
  background: #fff;
  }
  
.child:nth-child(2){
  margin-left: -5px;
}

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

Answer 4

Вы можете использовать span вместо div:

<div>
    <span>Content 1</span>
    <span>Content 2</span>
    <span>Content 3</span>
</div>

Или установите 'display' на inline или inline-block, как показано ниже:

.child {display: inline-block; border: 1px solid orange}

<div>
    <div class="child">Content 1</div>
    <div class="child">Content 2</div>
    <div class="child">Content 3</div>
</div>