Question

How can I achieve this type of layout?, I'm using Bootsrap.

Answer 1

请尝试以下操作： Demo

如你所说，你正在使用Bootstrap，我只是想让你继续，你可以根据需要进一步开发

.bg {
    height: 75px;
    margin: 0px 0;
    display: inline-block;
    background:#ccc;
    border:1px solid #999;
}
.border {
    background:#f00;
    border:1px solid #999;
    padding:10px;
}

HTML：

<div class="container">
    <div class="col-sm-4 ">
        <div class="clearfix border">
            <div class="col-sm-6 bg">img</div>
            <div class="col-sm-6 bg">img</div>
            <div class="col-sm-6 bg">img</div>
            <div class="col-sm-6 bg">img</div>
        </div>
    </div>
    <div class="col-sm-4">
        <div class=" border clearfix">
            <div class="col-sm-6 bg">img</div>
            <div class="col-sm-6 bg">img</div>
            <div class="col-sm-6 bg">img</div>
            <div class="col-sm-6 bg">img</div>
        </div>
    </div>
    <div class="col-sm-4">
        <div class=" border clearfix">
            <div class="col-sm-6 bg">img</div>
            <div class="col-sm-6 bg">img</div>
            <div class="col-sm-6 bg">img</div>
            <div class="col-sm-6 bg">img</div>
        </div>
    </div>

如何将<div>内的缩略图分为两行？

1 个答案: