Question

我已经在屏幕截图中显示了我目前拥有的内容以及我希望如何解决此问题：http://i.imgur.com/urAI4UF.png

以下是我的项目的简化HTML代码（我有19个图像，我在复杂的网格中构建，所以我只包括故障图像，因为其他人在一起玩得很好）：< / p>

<div class="wrapper">
    <div class="images">
        <div class="col col-1-3">
            <div class="module" id="img-10">
                <img src="img/pic_10.png">
            </div>
        </div>
        <div class="col col-1-3 clear">
            <div class="module" id="img-11">
                <img src="img/pic_11.png">
            </div>
        </div>
        <div class="col col-1-3">
            <div class="module" id="img-12">
                <img src="img/pic_12.png">
            </div>
        </div>
        <div class="col col-1-3">
            <div class="module" id="img-13">
                <img src="img/pic_13.png">
            </div>
        </div>
    </div><!--.images -->
</div><!--.wrapper -->

Img 11有一个清晰的，所以它将自己塞在图像10下，但是我不能让img 12和13与图像10保持同一水平。如果我不清楚img -11，它将与img-10并排。

这是我的CSS：

* { 
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing:border-box:
}
.wrapper {
    width: 1000px;
    margin:0 auto;
}
.grid {
    overflow: hidden;
}
    .col{
        float: left;
    }
    .col-1-5 {
        width: 20%;
    }
    .col-1-3 {
        width: 33.3333%;
    }
    .col-2-5 {
        width: 40%;
    }
    .col-2-3 {
        width: 66.6666%;
    }
    .col-3-5 {
        width: 60%;
    }
.module img {
    width: 100%;
    height: 100%;
    padding: 3px;
}
#img-10 {
    height: 194px;
    width: 333.33px;
}
#img-11 {
    height: 194px;
    width: 333.33px;
}
#img-12,
#img-13 {
    height: 388px;
    width: 333.33px;
}
.clear {
    clear: both;
}

更新：我从另一个网站上的朋友那里获得了帮助，并使用此代码工作：

<div class="col col-1-3">
    <div class="module" id="img-10">
        <img src="img/pic_10.png">
    </div>
    <div class="module" id="img-11">
        <img src="img/pic_11.png">
    </div>
</div>

Answer 1

更新：我从另一个网站上的朋友那里获得了帮助，并使用此代码工作：

<div class="col col-1-3">
    <div class="module" id="img-10">
       <img src="img/pic_10.png">
    </div>
    <div class="module" id="img-11">
        <img src="img/pic_11.png">
    </div>
</div>

清除后如何显示与其他图像齐平的图像？

1 个答案: