Question

我被困在如何为gallery.php页面排列图像，以便每行有4张图像。我的第一个想法是使用2个div，一个作为列1，一个作为列2，然后在div中标记左右两个跨度，并且浮动左侧浮动左侧，另一个跨度右侧。我确保两个使每个列div的宽度为50％，每个图像宽度为25％但是它仍然不起作用。

以下是我的代码的HTML部分，HTML下面是CSS。

     <p id="service">Gallery of Completed Sabers</p>
<div class="col1">  
    <span class="left">
    <img src="images/corran.jpg" alt="Corran Horn" />
    <p>GCS:Corran Horn</p></span>
    <span class="right">
    <img src="images/corran.jpg" alt="Corran Horn" />
    <p>GCS:Corran Horn</p></span>

    </div>
    <div class="col2">  
    <span class="left">
    <img src="images/corran.jpg" alt="Corran Horn" />
    <p>GCS:Corran Horn</p></span>
    <span class="right">
    <img src="images/corran.jpg" alt="Corran Horn" />
    <p>GCS:Corran Horn</p></span>

    </div>

CSS

    div.col1 {
width:50%;
}
div.col2 {
    width:50%;
}

span.left {
    float:left;;
}
span.right {
    float:right;
}   

img {
    width: 25%;
}

我将继续搞乱，看看，也许我会尝试4个不同的列。

谢谢

Answer 1

    <section class="column">
    <div class="image-container">
        <img src="https://m1.behance.net/rendition/modules/128626743/disp/bdf7c7afb76e0a0866cea43416c4b555.jpg">
    </div>
    <div class="image-container">
        <img src="https://m1.behance.net/rendition/modules/128626743/disp/bdf7c7afb76e0a0866cea43416c4b555.jpg">
    </div>
    <div class="image-container">
        <img src="https://m1.behance.net/rendition/modules/128626743/disp/bdf7c7afb76e0a0866cea43416c4b555.jpg">
    </div>
    <div class="image-container">
        <img src="https://m1.behance.net/rendition/modules/128626743/disp/bdf7c7afb76e0a0866cea43416c4b555.jpg">
    </div>

</section>

<section class="column">
    <div class="image-container">
        <img src="https://m1.behance.net/rendition/modules/128626743/disp/bdf7c7afb76e0a0866cea43416c4b555.jpg">
    </div>
    <div class="image-container">
        <img src="https://m1.behance.net/rendition/modules/128626743/disp/bdf7c7afb76e0a0866cea43416c4b555.jpg">
    </div>
    <div class="image-container">
        <img src="https://m1.behance.net/rendition/modules/128626743/disp/bdf7c7afb76e0a0866cea43416c4b555.jpg">
    </div>
    <div class="image-container">
        <img src="https://m1.behance.net/rendition/modules/128626743/disp/bdf7c7afb76e0a0866cea43416c4b555.jpg">
    </div>

</section>


*{
margin: 0px;
padding: 0px;
}

.column{
width:100%;
min-height:200px;
background:red;
border-bottom:1px solid blue;
}

.image-container{
width: 25%;
height: 200px;
float: left;
}

.image-container img{
max-height: 200px;
width: 100%;
}

将图像库组织成2列，每行4个图像

1 个答案: