如何水平堆叠多个div答案

【问题标题】：how to stack mulitple div's horizontaly如何水平堆叠多个div
【发布时间】：2018-09-11 06:20:52
【问题描述】：

我想水平堆叠一些 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垂直堆叠。

【问题讨论】：

你听说过Flex吗？
span 将满足您的需求。
.parent {display: flex}
向左浮动或将显示更改为 inline-block
哦不好意思没写我也在考虑flex，不过也需要一些孩子可以垂直堆叠

标签： html css flexbox

【解决方案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

【讨论】：

【解决方案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>

【讨论】：

以上是要走的路。您可能只需要为元素指定特定宽度即可使其生效。如果这有意义的话。
我的代码没有反映内容 3 的更改布局。

【解决方案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>

【讨论】：

【解决方案4】：

使用环绕 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>

【讨论】：

是的，但我不想包装它，因为我希望孩子们调整大小但不创建新行。我相信这一定是可能的。就像 Bootstrap 中的 Row 和 Col。