像桌子一样并排划分

时间:2013-02-21 05:00:53

标签: html css

我希望并排有两个div,并且只为一个div定义宽度。

然后,另一个div将自动适合父容器。我该怎么做?

HTML:

<div class="parent">
    <div class="first"></div>
    <div class="last"></div>
</div>

CSS:

.parent {
    width: 100%;
}
.parent .first {
    width: 300px;
    float: left;
    background-color: red;
}
.parent .last {
    width: auto;
    float: right;
    background-color: blue;
}

感谢。

2 个答案:

答案 0 :(得分:6)

不要float第二个div。只有第一个需要浮动。

http://jsfiddle.net/zLef8/

答案 1 :(得分:2)

试试这个

<div class="parent">
    <div class="first">test</div>
    <div class="last">test2</div>
</div>

的CSS

.parent {
    width: 100%;
}
.parent > .first {
    width: 300px;
    float: left;
    background-color: red;
}
.parent > .last {
    width: auto;
    float: right;
    background-color: blue;
    text-align:left
}

示例jsfiddle