html - 流动柱和固定柱

Question

我有这个代码:http://jsfiddle.net/spadez/TPKLv/

<div style="background-color:white; width: 400px;">
<span class="status" id="active"></span><a href="detail.html" class="title">Title</a>
<a href="#" class="number">6</a>
</div>
<div style="width: 100%; background-color: white; float:right;">
Test test
</div>

我正在尝试使右栏流动，占用剩余空间，而左栏固定宽度。谁能告诉我我的代码做错了什么，这是否是最好的方法？

Answer 1

最简单的是使用display:table-cell;(支持IE8及以上)

这样，你可以固定一个div的宽度，下一个div会占用剩余的空间

添加后，您甚至可以使用 inline 原生方法，例如 vertical-align，并且由于它不是 floating，因此可以调整div 很容易通过 margin 和 padding 取决于你的布局! :)

check this demo

对于页面中的固定宽度和动态宽度，它是最兼容和最干净的

对于 calc，it is incompatible with IE9 still

---

如果您必须定期使用它，请创建一个 span，如下所示:

span.fake_width{
    display:block;
    width:20px;
}

然后将其添加到现有布局中 Demo