具有不同高度图像的网格

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内的图像将堆叠在一起，上下均匀分布。 此外，高度将根据宽度限制为230像素而自动调整。

需要帮助请叫我。

<!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 个解决方案

解决方案1
0 已采纳 2013-07-30 15:27:33

解决方案2
0 2013-07-30 15:41:33

具有不同高度图像的网格

问题描述

2 个解决方案

解决方案1 0 已采纳 2013-07-30 15:27:33

解决方案2 0 2013-07-30 15:41:33

解决方案1
0 已采纳 2013-07-30 15:27:33

解决方案2
0 2013-07-30 15:41:33