堆疊divs - 垂直和水平佈局的混合

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

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 2

給75 PX的寬度到母體DIV以便放置3後，25像素元素的下一個元素將被迫是對新行。

 <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 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>