How to align cards horizontally with an equal top border, with CSS?
تبليغسؤال
يرجى شرح بإيجاز لمإذا تشعر أنك ينبغي الإبلاغ عن هذا السؤال.
How to align display: inline-block cards horizontally with an equal top border, with CSS?
Why is there a unequal top boder for each card when you open the following snippet in Full page width?
I used a fixed height and width for each .card element so I expected that it would be aligned.
Note: I also tried with display: table-cell but then I lost the fact that it’s fluid and that the cards auto-adapt to the browser width (I’d like to keep an automatic number of cards per row, fitting the browser width, without having a horizontal scrollbar).
#main { width: 100%; }
.cell { display: inline-block; }
.card { border: 1px solid black; margin: 3em; width: 15em; height: 30em; }
.card img { width: 15em; height: 20em; }
.container { padding: 2px 16px; height: 10em; width: 100%; box-sizing: border-box; }
<div id=”main”>
<div class=”cell”>
<div class=”card”>
<img src=””>
<div class=”container”>
<h4><b>Abc</b></h4>
<p>blablabla blablabla</p>
</div>
</div>
</div>
<div class=”cell”>
<div class=”card”>
<img src=””>
<div class=”container”>
<h4><b>Abc</b></h4>
<p>blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla</p>
</div>
</div>
</div>
<div class=”cell”>
<div class=”card”>
<img src=””>
<div class=”container”>
<h4><b>Abc</b></h4>
<p>blablabla blablabla</p>
</div>
</div>
</div>
<div class=”cell”>
<div class=”card”>
<img src=””>
<div class=”container”>
<h4><b>Abc</b></h4>
<p>blablabla</p>
</div>
</div>
</div>
</div>
.cell { display: inline-block; }
.card { border: 1px solid black; margin: 3em; width: 15em; height: 30em; }
.card img { width: 15em; height: 20em; }
.container { padding: 2px 16px; height: 10em; width: 100%; box-sizing: border-box; }
<div id=”main”>
<div class=”cell”>
<div class=”card”>
<img src=””>
<div class=”container”>
<h4><b>Abc</b></h4>
<p>blablabla blablabla</p>
</div>
</div>
</div>
<div class=”cell”>
<div class=”card”>
<img src=””>
<div class=”container”>
<h4><b>Abc</b></h4>
<p>blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla</p>
</div>
</div>
</div>
<div class=”cell”>
<div class=”card”>
<img src=””>
<div class=”container”>
<h4><b>Abc</b></h4>
<p>blablabla blablabla</p>
</div>
</div>
</div>
<div class=”cell”>
<div class=”card”>
<img src=””>
<div class=”container”>
<h4><b>Abc</b></h4>
<p>blablabla</p>
</div>
</div>
</div>
</div>
أضف إجابة