Question

我正在尝试使用css设置div表的样式。这是我的示例工作代码：

HTML：

<div class="container">
    <div class="row">
        <div class="table-row">
            <div class="mycolumn" id="sidebar">
                Sidebar area
            </div>
            <div class="mycolumn" id="content">
                <p>content area</p>
                <p>some more content</p>
            </div>
        </div>
    </div>
</div>

CSS

#sidebar{
    width: 250px;
    background-color: #eaeff1;
}
.table-row {
    display: table-row;
}
.mycolumn {
    display: table-cell;
    padding: 15px;
}
#content {
    background-color:#00eff0;
  /* width:100%; */
}
div {
    outline: 1px solid #3a87ad;
}

http://jsfiddle.net/gbovzuqm/

如何获取内容区域div来掩盖后面的所有剩余空间？我已尝试将width:100%应用于它，但它会挤压侧边栏区域。

如何使用CSS样式进行操作？

Answer 1

无需使用describe-bindings使用此

display:table-row

<强> updated jsFiddle Code

Answer 2

为了纠正这个问题，你可以这样做

   .table-row {
        display: table; //replace display:table-row;
        width: 100%;
    }

Answer 3

如果您设置了display: table-cell，那么只有将display: table-row和display: table设置为其祖先才能模拟表格才有意义。

Click here to see updated fiddle

这个问题可能纯粹是学术性的，但是如果你真的在现实生产系统中这样做的话就要考虑一些事情：你为什么要用<div>模拟表格和单元格呢？可以简单地使用<table>，<tr>和<td>？

此外，根据单元格数据中使用的单词，听起来您使用<div>作为表格的伪装来进行页面布局。请不要在现实生活中这样做。布局表是有理由的;用其他HTML标签伪装它们是更糟糕的事情。

CSS div表样式

3 个答案: