我正在尝试添加三个在较大容器内水平对齐的卡片 div。我将它们设置为 display: inline-block
但 div 杂乱无章且不在同一行。
我已经尝试使用内联和内联 block 设置,但都无法成功对齐三个 div。
.card {
display: inline-block;
width: 300px;
height: 350px;
margin: 0 0 0 0;
}
<div id="lowmid">
<div class="card">
<div class="card-image waves-effect waves-block waves-light">
<img class="activator" src="./photos/oaxaca.jpg">
</div>
<div class="card-content">
<span class="card-title activator grey-text text-darken-4">Card Title<i class="material-icons right">more_vert</i></span>
<p><a href="#">This is a link</a></p>
</div>
<div class="card-reveal">
<span class="card-title grey-text text-darken-4">Card Title<i class="material-icons right">close</i></span>
<p style="color: black">Here is some more information about this product that is only revealed once clicked on.</p>
</div>
</div>
<div class="card">
<div class="card-image waves-effect waves-block waves-light">
<img class="activator" src="./photos/india.jpg">
</div>
<div class="card-content">
<span class="card-title activator grey-text text-darken-4">Card Title<i class="material-icons right">more_vert</i></span>
<p><a href="#">This is a link</a></p>
</div>
<div class="card-reveal">
<span class="card-title grey-text text-darken-4">Card Title<i class="material-icons right">close</i></span>
<p style="color: black">Here is some more information about this product that is only revealed once clicked on.</p>
</div>
</div>
<div class="card">
<div class="card-image waves-effect waves-block waves-light">
<img class="activator" src="./photos/za.jpg">
</div>
<div class="card-content">
<span class="card-title activator grey-text text-darken-4">Card Title<i class="material-icons right">more_vert</i></span>
<p><a href="#">This is a link</a></p>
</div>
<div class="card-reveal">
<span class="card-title grey-text text-darken-4">Card Title<i class="material-icons right">close</i></span>
<p style="color: black">Here is some more information about this product that is only revealed once clicked on.</p>
</div>
</div>
</div>
尽管我将卡片 div 放在一个更大的容器中,给它们每个统一的大小,并将每个设置为 display: inline-,但卡片 div 没有对齐,而是在页面上困惑 block
。
请帮我对齐这三个卡片 div,以便它们可以水平对齐在同一行,在 id #lowmid
最佳答案
将 display:flex
添加到容器中。
#lowmid{
display:flex;
}
关于html - 如何在同一个 div 中对齐这三张卡片?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57582131/