像表格单元格一样并排放置div

Question

我希望有两个并排的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;
}

谢谢。

- Maurício Giordano

---

将 display: inline 添加到子 div。 - Cody Guldner

Answer 1

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

http://jsfiddle.net/zLef8/

- Explosion Pills

---

@MaurícioGiordano 因为当你浮动一个元素时，它的宽度只会与其内容一样宽，除非你指定一个宽度，即使它是 display: block。display: block 元素会填满行中所有可用的宽度。 - Explosion Pills

Answer 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

- user1423506