2

我正在使用 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;

修复方法：

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

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

4

2 回答 2

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>
于 2012-01-31T23:02:06.797 回答
0

这个我想试一试

以下是我将如何在您已有的 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%; }

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

祝你好运！

于 2012-01-31T22:36:02.163 回答