0

我正在尝试为我的投资组合网站创建一个网格布局。我无法让它在线工作。当我在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;
}
4

2 回答 2

0

You can also use css to set the heights and widths one time. Try this:

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;
}

That's better, because you cut the style from code.

于 2013-07-30T15:41:33.227 回答
0

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

您的代码：我的更改

<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 个具有“cols”类的 div，这 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>
于 2013-07-30T15:27:33.997 回答