Question

我正在尝试为HTML页面创建 3x3布局。我尝试过使用devs和soley一个表的多种方法，但似乎无法在居中图像和其余表行周围获得均匀距离。这是我想要实现的内容的布局表示：

enter image description here

<body>

<h1>Web Portal</h1>

<div>
    <table class="styled">
    <tr>
        <td><button type="button">Click Me!</button></td>
        <td><button type="button">Click Me!</button></td>
        <td><button type="button">Click Me!</button></td>
    </tr>
    </table>
</div>

<div>
    <table>
        <tr>
            <td><button type="button">Click Me!</button></td>
        </tr>
    </table>

    <img src="rais_globe.png" alt="rais_logo" height="420" width="420">

    <table>
        <tr>
            <td><button type="button">Click Me!</button></td>
        </tr>
    </table>

</div>

Answer 1

demo with css tables

<强> HTML

<div class="table">
    <div class="row">
        <div class="cell1">row 1</div>
        <div class="cell2"></div>
        <div class="cell3"></div>
    </div>
    <div class="row">
        <div class="cell1">row 2</div>
        <div class="cell2">
            <img src="http://upload.wikimedia.org/wikipedia/commons/1/1b/Square_200x200.png" />
        </div>
        <div class="cell3"></div>
    </div>
    <div class="row">
        <div class="cell1">row 3</div>
        <div class="cell2"></div>
        <div class="cell3"></div>
    </div>
</div>

<强> CSS

html, body {
    width:100%;
    height:100%;
    margin:0;
    padding:0;
}
.table {
    display:table;
    width:100%;
    height:100%;
    border:1px solid #000;
}
.row {
    display:table-row;
    height:100%;
}
.cell1, .cell2, .cell3 {
    display:table-cell;
    width:33%;
    height:100%;
    border:1px solid #CCC;
}
.cell2 > img {
    width:100%;
    height:auto;
}

HTML布局问题 - 具有居中图像的3x3表格

1 个答案: