Question

我正在尝试为我的投资组合网站创建网格布局。我在网上工作时遇到了麻烦。当我在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;
}

Answer 1

在图片代码上设置宽度和高度。我假设你希望它看起来都是相同的跨浏览器。那将是最好的选择。

您的代码：我的更改

<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...

这需要您做一些规划，但您可以简单地允许他们点击图片并查看完整视图。否则，你会得到不同宽高比的不同图像，它们看起来永远不会像你想要的那样好。

此外，请不要使用表格构建您的网站，除非您将使用表格数据。从长远来看，编辑很痛苦。

编辑* * 的

以下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>

Answer 2

您也可以使用css一次设置高度和宽度。试试这个：

HTML：

<div class="img_container">
  <div class="port"><img src="images/..."></img></div>
  <div class="land"><img src="images/..."></img></div>
</div>

CSS：

.img_container {
  width: 250px;
  height: 250px;
  background-color:grey;
}
.port {
  width: 100px;
  height: 200px;
}
.land {
  width: 200px;
  height: 100px;
}

那更好，因为你从代码中删除了样式。

网格具有不同高度的图像

2 个答案: