hen*_*ron 10 css alignment css3 css-tables
我有一个有两排的桌子.
看起来像这样:
—————————————————
| 1 | 2 |
|———————————————|
| 3 | |
—————————————————
Run Code Online (Sandbox Code Playgroud)
第一行有两个单元格,但第二行只有一个单元格.
如何在第二行中获取唯一的表格单元格,以便在第一行中的第二个表格单元格下对齐?(不在第二行中的单元格之前添加单元格)
像这样:
—————————————————
| 1 | 2 |
|———————————————|
| | 3 |
—————————————————
Run Code Online (Sandbox Code Playgroud)
这是我的HTML:
<div class="table">
<div class="row">
<div class="cell one">
1
</div>
<div class="cell two">
2
</div>
</div>
<div class="row">
<div class="cell three">
3
</div>
</div>
</div>
Run Code Online (Sandbox Code Playgroud)
我的CSS:
div.table {
display:table;
background:#EEE;
padding:10px;
}
div.row {
display:table-row;
background:#610;
padding:10px;
width:100%;
text-align:right;
}
div.cell {
display:table-cell;
background:#016;
padding:10px;
color:white;
font-family:sans-serif;
}
Run Code Online (Sandbox Code Playgroud)
我试过边缘和花车.如果可能的话,我想避免绝对和漂浮.
如果由于您无法控制HTML而不想要额外单元格的唯一原因,您可以这样做:
.row + .row:before {
content: '';
display:table-cell;
background-color:white;
}
Run Code Online (Sandbox Code Playgroud)