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

我建议这样做，条件始终为div宽度为400px。我假设您使用inline-style

<强> HTML

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

<强> CSS

body {background-color: gray;}

#rightCol{
    width: calc(100% - 400px);
}

fiddle

Answer 2

最原生的做法是操纵盒子模型：我已经在第一个div中添加了一个浮点数，并从第二个div中删除了它。这样第一个div被视为内联块，第二个div是一个块，它会努力忽略其他内联块。

我已经更新了你的小提琴：http://jsfiddle.net/TPKLv/3/

<div style="background-color:white; width: 400px; float:left">
    <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;">
   Test test
</div>

Answer 3

请尝试以下操作： Demo

<强> CSS：

.container {
    background-color:blue;
    height: auto;
    overflow: hidden;
}
.sidebar {
    float:left;
    background-color:grey;
    width: 100px;
}
.content {
    background-color:green;
    float: none;
    width: auto;
    overflow: hidden;
}

<强> HTML：

<div class="container">        
    <div class="sidebar">
      <span class="status " id="active"></span>
        <a href="detail.html" class="title">Title</a>    
         <a href="#" class="number">6</a>    
    </div>

    <div class="content">Test test</div>
</div>

更新后的内容 LINK 。

根据需要，我为div提供了填充和保证金，并且工作正常。

Answer 4

最简单的方法是使用display:table-cell;（ IE8及以上支持的）

这样，您可以修复一个div的宽度，下一个div将占用剩余空间

添加后，您甚至可以使用inline本地方法，例如vertical-align，因为它不是float，所以通过margin和{调整div的位置很容易{1}}取决于你的布局！：）

check this demo

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

代表padding，it is incompatible with IE9 still

如果您必须定期使用它，请创建calc，如下所示：

span

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

流体和固定柱

4 个答案: