Question

我想知道定位我的div最聪明的方法是什么。我试图按如下方式放置div：

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

不同div的想法是：

div1：徽标
div2：一些链接
div3：搜索字段
div4：菜单

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

你不必提供完整的代码或任何内容，只是提示如何“应该”完成。

提前致谢：）

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

Answer 1

在这种情况下，您并不真正需要使用position:absolute;。使用css float属性。

我调整了CSS代码以反映这一点并通过在容器上应用clear:both;来清除浮点数。

另外请注意：此margin: 0 auto 0 auto;与margin: 0 auto;相同。没有价值的，意味着保证金：上/下＆amp;左右。而不是保证金：右上角左下角。

看到我的jsFiddle来玩它并看看我做了什么。非常基本的变化。
http://jsfiddle.net/3wwaw/3/

FLOAT DEFINITION：
float CSS属性指定一个元素应该从正常流中取出并沿着其容器的左侧或右侧，文本和内联元素将包裹它。浮动元素是计算的元素 float的值不是none。

有关浮动的更多信息，请点击此处，包括用例：
https://developer.mozilla.org/en-US/docs/Web/CSS/float

Answer 2

我对它的看法（为清楚起见省略了一些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;
}

Answer 3

我发现定位事物的“最佳”方式主要取决于两件事：

我对我所定位的东西的大小了解多少（固定在px中？固定在em中但是有一个可变的font-size？完全可变？）？这些问题适用于身高和宽度。
当容器大于或小于它们需要时（包括作为浏览器窗口本身的容器），我想要发生什么？例如，如果容器非常大，那么在哪里分配额外的空间？如果容器非常小，内容是否可以与其他内容重叠，或者我是否需要通过设置最小高度/宽度来强制滚动条？

你没有指明这些事情中的任何一个，所以我不得不做出一堆假设甚至开始回答。

Answer 4

<div class="container">
    <div class="row-1 row-fluid">
         <div class="span3" id="div1" />
         <div class="span6" />
         <div class="span3">
            <div class="height-33" id="div2" />
            <div class="height-33">
            <div class="height-33" id="div3" />
         </div>
    </div>
    <div class="row-2" id="div4" />
</div>

高度33只是一个粗俗的类别，提到高度为33％。请注意，要使％工作，我们需要修复父级的高度。使用bootstrap或类似的span3百分比来拆分它。始终保持网站的结构。

智能css div定位

4 个答案: