Question

我想完成水平和垂直布局的混合。

<div>
  <div>
    <span>A</span>
    <span>B</span>
    <span>C</span>
  </div>
  <div>
    <span>D</span>
  </div>
</div>

＃1 它应该是这样的

A  B  C
<- D ->

＃2 相反，我有两个div元素彼此相邻

A  B  C  <- D ->

真实的例子有一些非常糟糕的CSS，我建议你不要看。我想将前三个项目设置为 25px 的相同宽度，并且彼此相邻排列。还有两个控制按钮下方的图片。

出于某种原因，div元素并没有堆叠在一起，而是在一行中彼此相邻。请帮忙！

<div>
<div>
   <button style="width: 25px; float: left;">-</button>
   <span   style="width: 25px; float: left; text-align: center;">0</span>
   <button style="width: 25px; float: left;">+</button>
</div>
<div>
  <img src="starry-night.jpg" width="500">
</div>
</div>

Answer 1

给父div赋予75 px的宽度，这样在放置3个25px元素后，下一个元素将被强制放在新行上。

        <div style="width: 75px;">
        <div>
           <button style="width: 25px; float: left;">-</button>
           <span   style="width: 25px; float: left; text-align: center;">0</span>
           <button style="width: 25px; float: left;">+</button>
        </div>
        <div>
          <img src="starry-night.jpg" width="500">
        </div>
        </div>

Answer 2

HTML：

<div>
  <div>
    <span>A</span>
    <span>B</span>
    <span>C</span>
  </div>
  <div>
    <span>D</span>
  </div>
</div>

CSS：

div {
  width: 100%;
}

div > div {
  display: flex;           /* pertinent */
  width: 100%;
}

div > div > span {
  width: 33%;              /* pertinent */
  justify-content: center; /* pertinent */
  margin: 1px auto;        /* pertinent */

  background: #333;
  text-align:center;
  color:#efefef;
  font-family: sans-serif;
}

https://jsfiddle.net/16dqk7cL/1/

Answer 3

其中一种可能的解决方案是使用容器Div并为其指定宽度。然后根据它调整其他Divs宽度。

<div style="width: 300px">
<div style="width=100%;">
   <button style="width: 33%; float: left;">-</button>
   <span   style="width: 33%; float: left; text-align: center;">0</span>
   <button style="width: 33%; float: left;">+</button>
</div>
<div style="width: 150px; margin:auto">
  <img src="starry-night.jpg" style="width: 150px;">
</div>
</div>

堆叠divs - 垂直和水平布局的混合

3 个答案: