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

Question

我正在使用 HTML5/CSS3 进行新设计，自从我上次使用 html 进行工作（而不是编写内容而不是布局）以来已经有一段时间了。

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

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

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

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

因此，类似于：

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

Section (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;

Ways of修复它：

• 显示：表格和表格单元格，有效，但它添加了我想避免的额外标签，也不确定是否在任何地方都有效？
• Flexbox？好吧，我是这么想的，但有问题，但无论如何它都没有得到广泛支持。
• 让所有的宽度都固定。
• 让所有的都有动态宽度。 （哦天哪）
• 表格，但我们知道讨论一切都很顺利。

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

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%; }

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

祝你好运！