スタッキング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 -> 

---

に次の二つのdiv要素に本当を持っているこの

A B C 
<- D -> 

＃2のようになります。例は私が推薦するいくつかの非常に悪いCSSがありますあなたは見ていない。上位3アイテムを同じ幅の25pxに設定し、隣り合わせに配置したいと考えました。そして2つのコントロールボタンの下の写真。

何らかの理由で、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

3を配置した後、25ピクセル要素次の要素は、新しい行になることを余儀なくされるように、親のdivに75ピクセルの幅を与えます。

 <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

一つは、コンテナ事業部を持って、それのために幅を指定することです。その後、それに基づいて他の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>