Question

我尝试用3张图片显示以下对象：

...........
|    |    |
|  1 |    |
|----|  2 |
|  3 |    |
|    |    |
|____|____|

我使用display样式：

    .table {
        display: table;
    }
    .row {
        display: table-row;
    } 
   .cell {
        display: table-cell;
    }

到目前为止，我得到了这个：

enter image description here

<div style="display: inline-block; height: 100%; overflow: hidden;">
            <div style="display: table;">
                <div class="row">                        
                    <div class="cell" style="height: 100%;">
                        <img style="height: 38.5%; display:block;" src="img/group_6.png"/>
                    </div>

                    <div class="cell" style="width: 37px;overflow: hidden;">
                         <img style="height: 74px; display: block; margin-left: -18.5px;" 
                              src="img/group_6.png" />
                    </div>
                </div>


                <div class="row">
                    <div  class="cell" style="height: 100%;">
                        <img style="height: 38.5%; display:block;"  src="img/group_6.png" />
                    </div>                       
                </div>
            </div>
        </div>

如何实现我发布的视图？

谢谢，

Answer 1

请更改图片名称。对于右侧可用的图像，您可能需要调整：对齐或顶部或底部边距。根据要求进行调整。我创建了边框，可以帮助您适当地调整图像。完成后请将其删除。请检查并确认......

 <html>
    <style>
    .table {
            display: table;
        }
        .row {
            display: table-row;
        } 
       .cell {
            display: table-cell;
        } 
    </style>
    <body>
        <div class="table">

                <div class="cell" style="border: 10px solid;">
                    <div class="row"  style="border: 10px solid;">
                        <img style="height: 38.5%; display: block;" src="xyz.jpg" />
                    </div>
                    <div class="row"  style="border: 10px solid;">
                        <img style="height: 38.5%; display: block;" src="pqrs.jpg" />
                    </div>
                </div>
                <div class="cell"  style="border: 10px solid; height:auto; width:100%">
                    <img align="middle" style="width:20%; height: auto; display: inline-block;" src="abcd.jpg" />
                </div>

        </div>
    </body>
    </html>

如何使用＆＃34;显示：表＆＃34;合并两行，css？

1 个答案: