如何模拟具有静态宽度行和动态宽度行的html表格答案

【问题标题】：How to simulate a html table with a static width row and a dynamic width row如何模拟具有静态宽度行和动态宽度行的html表格
【发布时间】：2015-01-16 10:03:12
【问题描述】：

我需要创建类似于旧的 html 表的东西，但使用 css。

看看这个结构：

<div id="dad">
    <div id="child-one"></div>
    <div id="child-two"></div>
</div>

“爸爸”应该有“宽度：100%”
“child-one”应该有“width: 300px”（静态宽度行）
“child-two”应该具有所有下一个宽度。（动态宽度行）

所以，如果“爸爸”有 1000px（但是，请记住这是 100%，而不是 1000px。假设用户有 1000px 的分辨率），那么：

“child-one”应该有 300px（永远！永远不会改变），并且：
“child-two”应该有 700 像素（但是，如果爸爸改变宽度，就会发生动态变化）。

我该怎么做？目前，“child-two”获取其内容的宽度。示例：如果在 child-two 中有一个宽度为 50px 的 IMG，“child-two”将只有 50px...但我需要 700px !!!

这里是最好的解决方案： Dynamic width DIV next to a static width DIV

【问题讨论】：

标签： html css width row css-tables

【解决方案1】：

试试这个：

#dad {
   width: 1000px;
}

#child-one {
   width: 30%;
}
#child-two {
   width: 70%;
}

【讨论】：

不...这是孩子一号的“30%”...我需要孩子一号的 300px。记住：静态行（child-one）和动态行（child-two）

【解决方案2】：

也许这就是你要找的东西

.dad{
    border: 2px solid #000;
    background-color: black;
    width: 100%;
    height: 200px;
    display: table;
}

.child-one{
    background-color: blue;
    width: 300px;
    height: 200px;
    display: block;
}

.child-two{
    background-color: red;
    width: 100%;
    height: 200px;
    display: table-cell;
}

http://jsfiddle.net/j4ngerxb/

【讨论】：