Question

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

看看这个结构：

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

“dad”应该有“width：100％”
“child-one”应具有“width：300px”（静态宽度行）
“child-two”应具有下一个宽度。（dinamic宽度行）

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

“child-one”应该有300px（永远！永远不会改变），并且：
“child-two”应该有700px（但是，如果爸爸改变宽度，则会改变dinamically）。

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

这是最佳解决方案： Dynamic width DIV next to a static width DIV

Answer 1

也许这就是你要找的东西

.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/

Answer 2

试试这个：

#dad {
   width: 1000px;
}

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

如何使用静态宽度行和动态宽度行模拟html表

2 个答案: