штабелирование 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 пикселей для родительского DIV так, что после размещения 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 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>