smart css div定位

我想知道什麼是最聰明的方式來定位我的div。我想放置的div如下：smart css div定位

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

不同的div的想法是：

DIV1：標誌
DIV2：一些鏈接
DIV3：搜索字段
div4：一個菜單

那你們怎麼這麼做呢？我已經自己做了，但我相信我的解決方案還不夠完美，所以我希望你們中的一些人有一些很好的解決方案。

你不必提供完整的代碼或任何東西，只是提示如何「應該」完成。

感謝提前:)

順便說一句我做了一個的jsfiddle與我的「解決方案」：http://jsfiddle.net/3wwaw/

來源

2013-11-26 Langkiller

唯一的標準是：它是否適用於所有瀏覽器？如果您的解決方案適用於所有瀏覽器，則大多數其他點都將是主觀的。 – Jeff

我拿上它（一些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; 
}

來源

2013-11-26 23:34:46 Sico

如果你想讓容器居中，你會怎麼做？另外，div2和div3如何放置（從我的帖子上的素描）？ – Langkiller

好吧，我想清楚了，我認爲所有的東西都應該放在那裏。感謝您的回答。 – Langkiller

用容器居中放置容器：0 auto;無論他們需要將集裝箱居中放置在什麼位置，汽車都會設置左右邊距 – Sico

是不是真的需要在這種情況下，您使用的position:absolute;。使用css float屬性。

我調整了CSS代碼以反映這一點，並通過在容器上應用clear:both;清除浮動。

另外請注意：這margin: 0 auto 0 auto;是相同的margin: 0 auto;。其中沒有值，意味着保證金：頂部/底部&左/右。而不是保證金：右上角左下角。

看到我的jsFiddle玩弄它，看看我做了什麼。非常基本的變化。
http://jsfiddle.net/3wwaw/3/

FLOAT DEFINITION：
浮子CSS屬性指定的元素應該從正常流中取出並沿着左側或右側其容器，其中文本和內聯元素放置將環繞它。浮點元素是float的計算值不是無的元素。在彩車

更多信息可以在這裏找到，包括用例：
https://developer.mozilla.org/en-US/docs/Web/CSS/float

來源

2013-11-26 23:34:44

我發現定位事物的「最佳」方式主要取決於兩件事：

我對我所定位的東西的大小知道多少（在px中修復？固定在em，但具有可變的字體大小？完全可變？）？這些問題適用於高度和寬度。
當容器比他們需要的大或小（包括瀏覽器窗口本身的容器）時，我想要發生什麼？例如，如果容器真的很大，額外的空間會被分配到哪裏？如果容器非常小，可以將內容與其他內容重疊，還是需要通過設置min-height/width來強制滾動條？

你沒有說明這些事情，所以我不得不做出一堆假設甚至開始回答。

來源

2013-11-26 23:49:57 Craig

<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％。請注意，爲了％工作，我們需要修正父母的身高。使用引導程序的或類似的span3百分比來分割它。始終保持網站的結構。

來源

2013-11-27 00:12:04 Zeblimiski

smart css div定位

回答

相關問題