CSS и позиционирование группы divs

Question

Я хотел бы получить эту группу букв X.

  X 
    X 
X   X 
    X 
X   X 
    X 
      X 

Вот мой код HTML/CSS, который не делает то, что я хочу.

<div> 
<div style="display:inline-block;vertical-align:middle"> 
<div style="clear:both;margin-top:50%;margin-bottom:50%">X</div> 
<div style="clear:both;margin-top:50%;margin-bottom:50%">X</div> 
</div> 

<div style="display:inline-block;vertical-align:middle"> 
<div style="clear:both;margin-top:50%;margin-bottom:50%">X</div> 
<div style="clear:both;margin-top:50%;margin-bottom:50%">X</div> 
<div style="clear:both;margin-top:50%;margin-bottom:50%">X</div> 
</div> 

<div style="display:inline-block;vertical-align:middle"> 
<div style="clear:both;margin-top:50%;margin-bottom:50%">X</div> 
<div style="clear:both;margin-top:50%;margin-bottom:50%">X</div> 
<div style="clear:both;margin-top:50%;margin-bottom:50%">X</div> 
<div style="clear:both;margin-top:50%;margin-bottom:50%">X</div> 
</div> 
</div> 

В чем проблема? Спасибо за любую помощь!

Answer 1

Flex и запас тоже может помочь, только с основой из 2 правил/линий. Пример со списком:

/* basis */ 
 

 
/* parent */ 
 

 
ul { 
 
    display: flex; 
 
} 
 
/* children */ 
 

 
li { 
 
    margin: auto 1em; 
 
} 
 
/*reset li ================ */ 
 

 
li { 
 
    display: block; 
 
    /* reset list-item */ 
 
}

<ul> 
 
    <li> 
 
    <p>X</p> 
 
    <p>X</p> 
 
    </li> 
 
    <li> 
 
    <p>X</p> 
 
    <p>X</p> 
 
    <p>X</p> 
 
    </li> 
 
    <li> 
 
    <p>X</p> 
 
    <p>X</p> 
 
    <p>X</p> 
 
    <p>X</p> 
 
    </li> 
 
</ul>

для старого браузера, настольный макет будет делать тоже (2rules, 3LINES)

ul { 
 
    display: table; 
 
} 
 
li { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    padding:0 1em; 
 
}

<ul> 
 
    <li> 
 
    <p>X</p> 
 
    <p>X</p> 
 
    </li> 
 
    <li> 
 
    <p>X</p> 
 
    <p>X</p> 
 
    <p>X</p> 
 
    </li> 
 
    <li> 
 
    <p>X</p> 
 
    <p>X</p> 
 
    <p>X</p> 
 
    <p>X</p> 
 
    </li> 
 
</ul>

inline-, наконец блок также 3lines, 2rules

ul { 
 
    display: block; 
 
} 
 
li { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    padding:0 1em; 
 
}

<ul> 
 
    <li> 
 
    <p>X</p> 
 
    <p>X</p> 
 
    </li> 
 
    <li> 
 
    <p>X</p> 
 
    <p>X</p> 
 
    <p>X</p> 
 
    </li> 
 
    <li> 
 
    <p>X</p> 
 
    <p>X</p> 
 
    <p>X</p> 
 
    <p>X</p> 
 
    </li> 
 
</ul>

<ul>, <li>, <p>, может быть любой тег с или без id, class, если структура соблюдается.

Answer 2

Просто добавьте некоторый запас для интервала: https://jsfiddle.net/e086qn3c/

CSS:

div div:first-child { 
    margin-right: 20px; 
} 

Answer 3

Я бы обернул все в контейнер, а затем использовал flex как на контейнере, так и на отдельных div, содержащих X. Fiddle here.

.container { 
 
    display: flex; 
 
    flex-direction: row; 
 
    justify-content:space-around; 
 
    width: 10rem; 
 
} 
 
.parent { 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 
.parent div { 
 
    margin: 8px 0; 
 
}

<div class="container"> 
 

 
    <div class="parent"> 
 
    <div>X</div> 
 
    <div>X</div> 
 
    <div>X</div> 
 
    </div> 
 

 
    <div class="parent"> 
 
    <div>X</div> 
 
    <div>X</div> 
 
    <div>X</div> 
 
    <div>X</div> 
 
    </div> 
 

 
    <div class="parent"> 
 
    <div>X</div> 
 
    <div>X</div> 
 
    <div>X</div> 
 
    <div>X</div> 
 
    <div>X</div> 
 
    </div> 
 
</div>