我正在尝试为我的投资组合网站创建网格布局。我无法让它在线工作。当我在 Dreamweaver 中尝试预览时，它看起来很好，但是当上传时，它全乱了。请帮忙
http://www.kaspervanvliet.nl/index.html
HTML:
<div id="images-containter">
<div class="col">
<img src="images/k_Web-03.jpg">
<img src="images/curriculum_new.jpg">
<img src="images/Finnley's_2.jpg">
<img src="images/Justme_1.jpg">
</div>
CSS:
.images-containter {
position: relative;
width: auto;
height: auto;
}
.images-containter img{
width: 350px;
height: auto;
background: #fffff;
padding: 0px;
margin: 15px;
border: none;
}
.col {
width: 350px;
display: block;
float: left;
margin: 15px;
vertical-align: top;
align: center;
}
最佳答案
在图片标签上设置宽度和高度。我假设您希望它在所有浏览器中看起来都一样。那将是最好的选择。
您的代码:我的更改
<div class="col">
<img src="images/k_Web-03.jpg" **height="100" width="75"**>
<img src="images/curriculum_new.jpg" **height="100" width="75"**>
<img src="images/Finnley's_2.jpg" **height="100" width="75"**>
<img src="images/Justme_1.jpg" **height="100" width="75"**>
</div>
etc...
这需要您进行一些计划，但您可以简单地让他们单击图像并查看完整 View 。否则，您将拥有具有不同宽高比的不同图像，并且它永远不会像您想要的那样好看。
此外，除非您打算使用表格数据，否则请不要使用表格来构建您的网站。从长远来看，编辑是一件痛苦的事情。
编辑**
下面的 html/css 会给你想要的结果。有 4 个 div 类为“cols”，这 4 个 div 被设置为 4 列。 div 内的图像将堆叠，上下均匀分布。此外，高度将根据限制为 230px 的宽度自动调整。
如果您还需要什么，请告诉我。
<!doctype html>
<html>
<head>
<style>
.wrap{
width:960px;
margin:0 auto;
}
.cols{
width:230px;
padding:5px;
float:left;
}
.cols img{
width:230px;
display:block;
margin:5px 0;
}
</style>
</head>
<body>
<div class="wrap">
<div class="cols">
<img src="images/k_Web-01.jpg">
<img src="images/k_Web-02.jpg">
<img src="images/k_Web-03.jpg">
</div>
<div class="cols">
<img src="images/k_Web-04.jpg">
<img src="images/k_Web-05.jpg">
<img src="images/k_Web-06.jpg">
</div>
<div class="cols">
<img src="images/k_Web-07.jpg">
<img src="images/k_Web-08.jpg">
<img src="images/k_Web-09.jpg">
</div>
<div class="cols">
<img src="images/k_Web-10.jpg">
<img src="images/k_Web-11.jpg">
<img src="images/k_Web-12.jpg">
</div>
</div>
</body>
</html>
关于html - 具有不同高度图像的网格，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17950704/