html - 智能CSS div定位

Question

我想知道放置我的 div 的最聪明的方法是什么。我正在尝试按如下方式放置 div:

---------------------------------------------------------|
|               |                          |  div2       |
|    div1       |                          |_____________|
|               |                                        |
|               |                           _____________|
|               |                          |  div3       |
|_______________|__________________________|_____________|
|                                                        |
|                     div4                               |
|________________________________________________________|

不同div的思路是:

• div1:一个标志
• div2:一些链接
• div3:搜索字段
• div4:一个菜单

那么你们是怎么做到的呢？我自己已经做到了，但我确信我的解决方案远非完美，所以我希望你们中的一些人有一些很好的解决方案。

您不必提供完整的代码或任何东西，只需提示“应该”如何完成即可。

提前致谢:)

顺便说一句，我用我的“解决方案”制作了一个 jsfiddle:http://jsfiddle.net/3wwaw/

Answer 1

我的看法(为清楚起见省略了一些 CSS)

http://jsfiddle.net/3wwaw/1/

<div class='topContainer'>
    <div class='topFieldLeft'>LOGO</div>
    <div class='topFieldRight'>SEARCH</div>
</div>
<div class='topmenu'>menu</div>
<div class='contentContainer'></div>

div.topContainer {
    height:50px
}

div.topFieldLeft {
    float: left;
}

div.topFieldRight {
    float: right;
}

div.topmenu {
    width:100%;
    height: 40px;
    background-color: #000;
    opacity: 0.50;
    filter: alpha(opacity 50);
    clear: both;
}

div.contentContainer {
    max-width: 900px;
    min-width: 600px;
    min-height: 300px;
    margin: 40px auto auto auto;
    border: 1px solid;
}