具有不同高度圖像的網格

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