如何堆叠多个div的horizo​​ntaly

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>

我想要与Bootstrap中的ROW和COL相同的功能，您可以在其中定义

<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

如果我对问题的理解正确，则可以使用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 2

您可以使用span代替div：

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

或将“显示”设置为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>

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

使用包装纸flexbox，并将.child的宽度设置为50％。使用box-sizing：边框框将边框的宽度包括在孩子的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>