我试图构造一个类似于下面的布局:
+---+---+---+
| | | |
+---+---+---+
| |
+-----------+
底部填充上一行的空间。
如果这是一个实际的表，我可以使用<td colspan="3">轻松完成，但由于我只是创建一个类似于表的布局，所以不能使用<table>标记。这是可能的使用CSS?
当前回答
提供一个最新的答案:今天最好的方法是使用css网格布局，像这样:
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto;
grid-template-areas:
"top-left top-middle top-right"
"bottom bottom bottom"
}
.item-a {
grid-area: top-left;
}
.item-b {
grid-area: top-middle;
}
.item-c {
grid-area: top-right;
}
.item-d {
grid-area: bottom;
}
以及HTML
<div class="container">
<div class="item-a">1</div>
<div class="item-b">2</div>
<div class="item-c">3</div>
<div class="item-d">123</div>
</div>
其他回答
如果使用div和span，当datagrid-table行体积更大时，它将占用更多的代码大小。下面的代码在所有浏览器中都进行了检查
HTML:
<div id="gridheading">
<h4>Sl.No</h4><h4 class="big">Name</h4><h4>Location</h4><h4>column</h4><h4>column</h4><h4>column</h4><h4>Amount(Rs)</h4><h4>View</h4><h4>Edit</h4><h4>Delete</h4>
</div>
<div class="data">
<h4>01</h4><h4 class="big">test</h4><h4>TVM</h4><h4>A</h4><h4>I</h4><h4>4575</h4><h4>4575</h4></div>
<div class="data">
<h4>01</h4><h4 class="big">test</h4><h4>TVM</h4><h4>A</h4><h4>I</h4><h4>4575</h4><h4>4575</h4></div>
CSS:
#gridheading {
background: #ccc;
border-bottom: 1px dotted #BBBBBB;
font-size: 12px;
line-height: 30px;
text-transform: capitalize;
}
.data {
border-bottom: 1px dotted #BBBBBB;
display: block;
font-weight: normal;
line-height: 20px;
text-align: left;
word-wrap: break-word;
}
h4 {
border-right: thin dotted #000000;
display: table-cell;
margin-right: 100px;
text-align: center;
width: 100px;
word-wrap: break-word;
}
.data .big {
margin-right: 150px;
width: 200px;
}
你可以这样定位:绝对的;并指定宽度。这不是一个很流畅的方法，但这是可行的。
CSS属性“column-count”、“column-gap”和“column-span”可以做到这一点，使伪表的所有列保持在相同的包装器中(HTML保持漂亮和整洁)。
唯一需要注意的是，您只能定义1列或所有列，而且列-span在Firefox中还不能工作，因此需要一些额外的CSS来确保它能够正确显示。 https://www.w3schools.com/css/css3_multiple_columns.asp
.split-me { -webkit-column-count: 3; -webkit-column-gap: 0; -moz-column-count: 3; -moz-column-gap: 0; column-count: 3; column-gap: 0; } .cols { /* column-span is 1 by default */ column-span: 1; } div.three-span { column-span: all !important; } /* alternate style for column-span in Firefox */ @-moz-document url-prefix(){ .three-span { position: absolute; left: 8px; right: 8px; top: auto; width: auto; } } <p>The column width stays fully dynamic, just like flex-box, evenly scaling on resize.</p> <div class='split-me'> <div class='col-1 cols'>Text inside Column 1 div.</div> <div class='col-2 cols'>Text inside Column 2 div.</div> <div class='col-3 cols'>Text inside Column 3 div.</div> <div class='three-span'>Text div spanning 3 columns.</div> </div> <style> /* Non-Essential Visual Styles */ html * { font-size: 12pt; font-family: Arial; text-align: center; } .split-me>* { padding: 5px; } .cols { border: 2px dashed black; border-left: none; } .col-1 { background-color: #ddffff; border-left: 2px dashed black; } .col-2 { background-color: #ffddff; } .col-3 { background-color: #ffffdd; } .three-span { border: 2px dashed black; border-top: none; text-align: center; background-color: #ddffdd; } </style>
提供一个最新的答案:今天最好的方法是使用css网格布局，像这样:
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto;
grid-template-areas:
"top-left top-middle top-right"
"bottom bottom bottom"
}
.item-a {
grid-area: top-left;
}
.item-b {
grid-area: top-middle;
}
.item-c {
grid-area: top-right;
}
.item-d {
grid-area: bottom;
}
以及HTML
<div class="container">
<div class="item-a">1</div>
<div class="item-b">2</div>
<div class="item-c">3</div>
<div class="item-d">123</div>
</div>
另一个建议是使用flexbox而不是完全使用表格。这当然是一个“现代浏览器”的事情，但拜托，这是2016年;)
至少对于那些现在正在寻找答案的人来说，这可能是另一种解决方案，因为最初的帖子是在2010年发布的。
这里有一个很好的指南:https://css-tricks.com/snippets/css/a-guide-to-flexbox/
.table { border: 1px solid red; padding: 2px; max-width: 300px; display: flex; flex-flow: row wrap; } .table-cell { border: 1px solid blue; flex: 1 30%; } .colspan-3 { border: 1px solid green; flex: 1 100%; } <div class="table"> <div class="table-cell"> row 1 - cell 1 </div> <div class="table-cell"> row 1 - cell 2 </div> <div class="table-cell"> row 1 - cell 3 </div> <div class="table-cell colspan-3"> row 2 - cell 1 (spans 3 columns) </div> </div>
