Question

我正在研究HTML5 / CSS3中的一个新设计，自从我上次使用html以来，已经有一段时间了，而不是编写内容，而不是编写内容。

我想要实现的是“全宽”或“80％宽度”设计，使其适合浏览器尺寸低至800px。（最小宽度）。

内容的一部分将包含一个放置在右侧的导航块（固定大小，比如300px），我通过使用浮点数实现了这一点，虽然我已经学会讨厌浮动因为“clearfix”问题，bur为缺乏更好的。

在它的左边，我希望内容占用正确浮动元素的空间。

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

类似于：

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

解决问题的方法：

显示：表格和表格单元格有效，但它会添加我想避免的额外标签，也不确定无处不在？
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%; }

此代码应该为您提供更多视角，并且它可以工作，您可以将“更多”内容放在一边，它不会破坏布局。

祝你好运！

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

2 个答案: