填充浮动的左侧：全宽设计中的右侧元素

Question

我正在使用 HTML5/CSS3 进行新的设计，距离我上次使用 html 的工作已经有一段时间了，而不仅仅是编写内容，而不是布局。

我想要实现的是“全宽”或更确切地说是“80% 宽度”的设计，以便它适合浏览器大小到 800 像素。 （最小宽度）。

部分内容将包含放置在右侧的导航块（固定大小，例如 300 像素），我通过使用浮动实现了这一点，尽管由于“clearfix”问题我已经学会讨厌浮动，但对于缺乏更好的。

在它的左侧，我希望内容占据右侧浮动元素的空间。

但是，如果该内容超出宽度，则会将右侧浮动元素向下推。

比如：

   -----------------------------------------------------------
          |                 Header                    |
          |                <header>                   |
          |-------------------------------------------|
   <-10%->|         <- Fill ->            |<- 300px ->|<-10%->
          |                               |           |
          |         <section>             |  <aside>  |
   -----------------------------------------------------------

部分 (id=articles) 设置为：

margin: 0 0 0 30px;
display: inline-block;
float: left;

Aside (id=sidebar) 设置为：

margin: 0 30px 10px 30px;
width: 290px;   

border:1px solid #6B6B6B;

border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;

box-shadow: 0px 0px 2px 1px #6B6B6B inset;

display: inline-block;
float: right;

修复方法：

• 显示：表格和表格单元格，可以使用，但它添加了我想避免的额外标签，也不确定在任何地方都可以使用？
• 弹性盒？好吧，所以我想，但有问题，但无论如何它都没有得到广泛支持。
• 让所有的都有固定的宽度。
• 让所有的都有动态宽度。 （天哪）
• 表格，但我们非常了解这种讨论。

现在无法正确处理该列表中的第一个，因为这是目前唯一让我实现目标的方法，但我想看看是否有更干净的方法。强>

Answer 1

这样的事情怎么样？为左右部分创建一个容器。提供右边距，为正确的容器腾出空间。你可以浮动它，但我绝对定位它，因为你讨厌浮动 =)。

http://jsfiddle.net/Z62f2/

div { border: 1px solid gray; width: }
#container { width: 80%; min-width: 600px; margin: 0 auto;  }
#header { height: 100px; }
#content { position: relative; }
#left { margin-right: 300px; height: 1000px; }
#right { width: 300px; height: 500px; position: absolute; top: 0px; right: 0px; }

<div id="container">
    <div id="header">Header</div>
    <div id="content">
        <div id="left">Left</div>
        <div id="right">Right</div>
    </div>
</div>

Answer 2

我想试一试，

以下是我将如何在您已有的 HTML 中标记它。基本上我插入了另一个 div 来包含该部分和旁边。

<div id="contentContain">
    <div id="section"></div>
    <div id="aside"></div>
</div>

还有 CSS..

#contentContain {width: 80%; }
#section {float:left; width: 60%;}
#aside {float:left; width: 40%; }

这段代码应该给你更多的视角，而且它有效，你可以在一边有“更多”的内容，它不会破坏布局。

祝你好运！