Question

我想在调整大小时保持10个不同大小的图像保持成比例，并保持在每一行。我不能改变它的布局方式，因为我正在使用.jsp为客户端工作，它正在从我无法编辑的帖子中提取信息。这就是我没有使用行/列的原因。

HTML看起来像这样。

                <div>
                    <p>
                    <!-- Top Row -->
                        <a target="_blank" href=""><img src="/images/uploaded/1.jpg" height="231" width="216"></a>

                        <a target="_blank" href=""><img src="/images/uploaded/2.jpg" height="231" width="191"></a>

                        <a target="_blank" href=""><img src="/images/uploaded/3.jpg" height="231" width="215"></a>
                    <!-- End Top Row -->
                    <!-- Second Row -->
                        <a target="_blank" href=""><img src="/images/uploaded/4.jpg" height="167" width="311"></a>

                        <a target="_blank" href=""><img src="/images/uploaded/5.jpg" height="167" width="311"></a>
                    <!-- End Second Row -->
                    <!-- Third Row -->
                        <a target="_blank" href=""><img src="/images/uploaded/6.jpg" height="173" width="216"></a>

                        <a target="_blank" href=""><img src="/images/uploaded/7.jpg" height="173" width="191"></a>

                        <a target="_blank" href=""><img src="/images/uploaded/8.jpg" height="173" width="215"></a>
                    <!-- End Third Row -->
                    <!-- Fourth Row -->
                        <a target="_blank" href=""><img src="/images/uploaded/9.jpg" height="173" width="311"></a>

                        <a target="_blank" href=""><img src="/images/uploaded/0.jpg" height="173" width="311"></a>
                    <!-- End Fourth Row -->
                    <!-- Banner -->    
                        <img src="/images/uploaded/1516_thumbs/banner.jpg" height="252" width="622">
                        <br>
                        <br>
                    </p>
                </div>
            </div>

对于我尝试从“body_content”切换的CSS和使用此代码的div

 div#body_content div {
    width: 100%;
    height: auto;
    position: relative;
 }

和

 div#body_content div p a img {
    float: left;
    min-width: 33.333%;
    width:100%
 }

大约有一百万种变体，并且无法弄清楚如何将所有内容保留在他们的行中。我也在使用Bootstrap。

Answer 1

在bootstrap中你可以做到

 <div>
            <div class="row">
            <!-- Top Row -->
                <div class="col-md-4">
                <a target="_blank" href=""><img src="/images/uploaded/1.jpg" height="231" width="216"></a>
                </div>
                <div class="col-md-4">
                <a target="_blank" href=""><img src="/images/uploaded/2.jpg" height="231" width="191"></a>
                </div>
                <div class="col-md-4">
                <a target="_blank" href=""><img src="/images/uploaded/3.jpg" height="231" width="215"></a>
                </div>
                </div>
            <!-- End Top Row -->

            <!-- Second Row -->
                <div class="row">
                <div class="col-md-6">
                <a target="_blank" href=""><img src="/images/uploaded/4.jpg" height="167" width="311"></a>
                </div>
                <div class="col-md-6">
                <a target="_blank" href=""><img src="/images/uploaded/5.jpg" height="167" width="311"></a>
                </div>
                </div>
            <!-- End Second Row -->

            <!-- Third Row -->
                <div class="row">
                <div class="col-md-4">
                <a target="_blank" href=""><img src="/images/uploaded/6.jpg" height="173" width="216"></a>
                </div>
                <div class="col-md-4">
                <a target="_blank" href=""><img src="/images/uploaded/7.jpg" height="173" width="191"></a>
                </div>
                <div class="col-md-4">
                <a target="_blank" href=""><img src="/images/uploaded/8.jpg" height="173" width="215"></a>
                </div>
                </div>
            <!-- End Third Row -->

            <!-- Fourth Row -->
                <div class="row">
                <div class="col-md-6">
                <a target="_blank" href=""><img src="/images/uploaded/9.jpg" height="173" width="311"></a>
                </div>
                <div class="col-md-6">
                <a target="_blank" href=""><img src="/images/uploaded/0.jpg" height="173" width="311"></a>
                </div>
                </div>
            <!-- End Fourth Row -->
            <!-- Banner -->  
                <div class="row">  
                <img src="/images/uploaded/1516_thumbs/banner.jpg" height="252" width="622">
                </div>
        </div>

调整大小时保持不同大小的图像成比例

1 个答案: