我正在用HTML5 / CSS3进行新设计，自从我上次使用html以来，已经有一段时间了。
我想要实现的是“全角”或“ 80％宽度”设计，以使其适合浏览器尺寸低至800px。 （最小宽度）。
内容的一部分将包含一个放置在右侧的导航块（固定大小，例如300px），尽管我由于“ clearfix”问题而讨厌浮动，但我还是通过使用float实现了这一点，因为缺少更好的选择。
在它的左侧，我希望内容占据右侧浮动元素的空间。
但是，如果该内容超出宽度，则会将右侧浮动元素向下推。
所以像这样：
-----------------------------------------------------------
| Header |
| <header> |
|-------------------------------------------|
<-10%->| <- Fill -> |<- 300px ->|<-10%->
| | |
| <section> | <aside> |
-----------------------------------------------------------
部分（id = articles）设置为：
margin: 0 0 0 30px;
display: inline-block;
float: left;
旁边（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;
修复方法：
display：table和table-cell，可以工作，但是它添加了我想避免的额外标签，还不确定在任何地方都可以工作吗？
flexbox？好吧，我想但是有问题，但是无论如何它并没有得到广泛支持。
让所有的都具有固定的宽度。
让所有具有动态宽度。 （哦，男孩）
表格，但我们知道讨论一切顺利。
现在，我不能正确处理该列表中的第一个，因为这是当前让我实现目标的唯一方法，但是我想看看是否有更干净的方法。
最佳答案
这样的事情怎么样？为左右部分创建一个容器。提供适当的边距，为合适的容器腾出空间。您可以浮动它，但是我绝对定位它，因为您讨厌浮动=）。
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>
关于html5 - 填充浮标的左侧:全宽设计中的右侧元素，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/9086618/