要素の位置HTML/CSS

Question

これらのボックスの配置に問題があります。絵に描かれているのとまったく同じようにする方法を知っている人はいますか？

https://i.stack.imgur.com/9aW9B.png

彼らはこのために重要ではありませんので、CSSからのいくつかの部分を削除しました。

CSS & HTML

.aktualita-perex{ 
 
\t float: left; 
 
\t width: 100%; 
 
\t padding-bottom: 10px; 
 
\t color: #4c4c4c; 
 
} 
 

 
.aktualita-img{ 
 
\t position: relative; 
 
\t float: left; 
 
} 
 

 
.aktualita-thumbmail{ 
 
\t width: 100%; 
 
\t height: 216px; 
 
\t object-fit: cover; 
 
} \t \t 
 
\t 
 
.aktualita-header{ 
 
\t color: #282828; 
 
\t font-size: 27px; 
 
\t width: 100%; 
 
\t padding-bottom: 20px; 
 
} 
 

 
.aktualita-body{ 
 
\t padding: 15px; 
 
\t float: left; 
 
} 
 
\t \t 
 
.aktualita-container{ 
 
\t width: 383px; 
 
\t border: 1px rgba(125, 125, 125, 0.19) solid; 
 
\t float: left; 
 
\t margin: 5px; 
 
\t border-radius: 5px; 
 
\t overflow: hidden; 
 
} \t

<article class="aktualita-container"> 
 
<div class="aktualita-thumbmail"> 
 
<div class="aktualita-img"><img src="http://i.imgur.com/x3lpHuG.jpg" width="100%" height="100%"></div> 
 
<div class="aktualita-datum">25. Ledna 2017</div> 
 
</div> 
 
<div class="aktualita-body"> 
 
<div class="aktualita-header">Aqualand Moravia</div> 
 
<div class="aktualita-perex">SOME TEXT</div> 
 
<div class="aktualita-tlacitko">Číst více</div> 
 
</div> 
 
</article>

Answer 1

あなたの山車があるため、コンテナの高さでオフになっています。シームレスにするには、高さを増やすか、高さを追加することをお勧めします（現在コンテナに1つも持っていない場合）。

Answer 2

float: leftを試して、display: inline-blockにしてください。

Answer 3

この特定の状況では、左に移動するコンテナ/記事タグのCSSにclear: leftを追加できます。

@ oompahlumpaが書いたように、すべてのコンテナを同じ高さに設定する必要があります。