如何修复此列
如何修复此列
提问于 2022-08-10 23:17:34
自从我使用CSS已经有一段时间了。我需要帮助把专栏做得更好。我希望第二排对齐。照片应该是相同大小的。如果我决定把它列成3列，请告诉我该怎么做。我会附上一张照片，照片是什么样子的。
下面是代码：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div.a {font-size: 14px;}
* {
box-sizing: border-box;
}
/* Create two equal columns that floats next to each other */
.column {
float: left;
width: 45%;
padding: 10px;
height: min;
}
/* Clear floats after the columns */
.row:after {
content: "";
/*display: table;*/
clear: both;
}
/* Responsive layout - makes the two columns stack on top of each other instead of
next to each other */
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}
</style>
</head>
<body>
<div class="row">
<div class="column" style="">
<img src="/uploads/agent-7/1172.jpg" style="width:100%">
<em>1172 Victory Blvd Staten Island, NY</em>
</div>
<div class="column" style="">
<img src="/uploads/agent-7/Cover_2040_Victory_23.jpg" style="width:100%">
<em>2040 Victory Blvd Staten Island, NY</em>
</div>
</div>
<div class="row">
<div class="column" style="">
<img src="/uploads/agent-7/123_Monroe_.jpg" style="width:100%">
<em>123 Monroe Ave Staten Island, NY</em>
</div>
<div class="column" style="">
<img src="/uploads/agent-7/465_Albany_Shaker_Road_.jpg" style="width:100%">
<em>465 Albany Shaker Rd Colonie, NY</em>
</div>
</div>
</body>
</html>回答 2
Stack Overflow用户
发布于 2022-08-10 23:23:59
你的问题是你的图像并不都是一样高的。将.column css高度更改为特定大小，它将正确对齐(假定图像不大于您指定的高度)。对于非常大的图像，您可能需要使用溢出参数或自动宽度。)
Stack Overflow用户
发布于 2022-08-10 23:26:41
尝尝这个
.row:after {
content: "";
display: table;
clear: both;}
也许不要使用左浮动(有段时间没有美元HTML了)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73313702
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号