1
6つのdiv要素を1行につき3列のレイアウトに配置するのが苦労しています。私はそれらを2つの行に配置している瞬間に、しかし、私は持っている問題は、いずれかの列のh2要素が少し長い場合、それはすぐ下の列をプッシュする傾向がある、そこに巨大なスペースを残して2番目の行に表示されます。 これをもっとうまく整列させる方法はありますか？ 
6 div要素の3列レイアウトを作成する方法
body {
width: 100%;
background-image: url("../img/pexels-photo-207301.jpeg");
background-position: center center;
background-repeat: no-repeat;
background-size: 100% 100%;
background-size: cover;
background-attachment: fixed;
font-family: "Abel", sans-serif;
font-size: 20px;
color: #3b3b3b;
}
h1, h2 {
font-family: "'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif";
font-weight: bold;
text-transform: uppercase;
margin: 0px;
padding: 0px;
color: #111111;
text-align: center;
}
#mainpage {
max-width: 960px;
padding: 20px;
margin: 0 auto;
}
#header {
width: 100%;
margin: 15px auto;
}
#logo h1 {
line-height: 150px;
letter-spacing: -1px;
font-size: 4.5em;
}
#six-columns {
width: 100%;
background-color: rgba(250, 250, 250, 0.6);
}
#six-columns .column {
float: left;
width: 29.333%;
margin: 1%;
padding: 1%;
}
#six-columns::after {
content: "";
display: block;
clear: both;
}<body>
<div id="mainpage">
<div id="header-container">
<div id="header">
<div id="logo">
<h1> My Third Site</h1>
</div>
</div>
</div>
<div id="six-columns">
<div class="column">
<h2> Dignissim augue</h2>
<p>Dignissim augue aenean, fringilla maecenas. Consectetuer condimentum. Dis libero neque accumsan ipsum facilisi, neque ornare rem in ligula luctus. Elit quam tincidunt porta veniam lorem. Lobortis tempor vitae justo. Taciti suspendisse mauris, mattis a ligula velit semper pede euismod, tortor amet. Aliquam id, ut adipiscing. Morbi diam in neque, congue arcu elit maecenas, in sapien ullamcorper neque vestibulum. Leo nisl cursus turpis sit, vestibulum est ut tortor, massa hendrerit mauris orci, vestibulum in dolor eu penatibus</p>
</div>
<div class="column">
<h2> cras tellus</h2>
<p>Praesent nam tempus luctus vestibulum, vivamus wisi. Mauris vitae justo metus, pretium nulla eu proident morbi. Auctor vitae, felis dolor vel turpis diam. Cras morbi, duis a duis feugiat sodales ut cras, et sociis nibh tincidunt. Consequat nam nulla, interdum lectus rutrum ac penatibus mauris. Magna nisl arcu et platea a sed, cras tellus, sit nam turpis mi sodales pede nunc. Sapien donec facilisi cupiditate, suspendisse vel</p>
</div>
<div class="column">
<h2> posuere erat</h2>
<p>Lorem ipsum dolor sit amet, posuere erat quis tellus, pede non maecenas convallis dapibus ut, ipsum arcu facilisi nunc mollis eu risus, fermentum volutpat maecenas convallis etiam, et eget ut aliquet phasellus sagittis metus. Nulla vel wisi a eu in. Diam sociis eros. Aliquet vitae commodo ante, rutrum praesent odio urna pellentesque. Metus viverra volutpat etiam lorem nesciunt, sapien pellentesque, massa nec. Nec congue aliquam a lobortis sed, dui imperdiet vestibulum magnis aenean sed sit, dignissim sem sodales.</p>
</div>
<div class="column">
<h2> nostra purus</h2>
<p>Rhoncus ornare dictum varius suscipit nostra purus, sit sit egestas bibendum, pharetra quis ut magna integer wisi, orci purus sed sed dictum aliquam maecenas, pretium et urna porttitor integer fringilla at. Maecenas sapien. Nullam augue ac ut imperdiet sed mollis, duis vestibulum tellus nullam a enim, dui dapibus cras, quis justo mattis. Convallis non praesent quam elementum conubia, ante condimentum duis velit pharetra, lacinia ut molestie at justo etiam, metus tortor magna blandit sapien vehicula nullam, est posuere.</p>
</div>
<div class="column">
<h2> suscipit nostra</h2>
<p>Rhoncus ornare dictum varius suscipit nostra purus, sit sit egestas bibendum, pharetra quis ut magna integer wisi, orci purus sed sed dictum aliquam maecenas, pretium et urna porttitor integer fringilla at. Maecenas sapien. Nullam augue ac ut imperdiet sed mollis, duis vestibulum tellus nullam a enim, dui dapibus cras, quis justo mattis. Convallis non praesent quam elementum conubia, ante condimentum duis velit pharetra, lacinia ut molestie at justo etiam, metus tortor magna blandit sapien vehicula nullam, est posuere.</p>
</div>
<div class="column">
<h2> Rhoncus ornare</h2>
<p>Rhoncus ornare dictum varius suscipit nostra purus, sit sit egestas bibendum, pharetra quis ut magna integer wisi, orci purus sed sed dictum aliquam maecenas, pretium et urna porttitor integer fringilla at. Maecenas sapien. Nullam augue ac ut imperdiet sed mollis, duis vestibulum tellus nullam a enim, dui dapibus cras, quis justo mattis. Convallis non praesent quam elementum conubia, ante condimentum duis velit pharetra, lacinia ut molestie at justo etiam, metus tortor magna blandit sapien vehicula nullam, est posuere.</p>
</div>
</div>
<div id="test-floats">
<h2> Testing Floats </h2>
</div>
</div>
</body>
</html>
おかげBhuwanに従ってください。 –
お手伝いします:) – Bhuwan