css在固定元素旁邊浮動

我需要一些CSS幫助。css在固定元素旁邊浮動

我想創建這樣的結構：

我想創建一個菜單，中心固定，用寬960px; - 這很簡單..

在菜單的同一行上，我想創建兩個div：一個從顯示器的左邊框到midle居中div的最近距離，另一個來自下一個居中，直到顯示器的右邊界。

我會嘗試用密鑰來描述你。

右側和左側的div將是流動的，並將取決於屏幕分辨率。

任何人都可以幫到我嗎？

謝謝。

來源

2012-07-18 Sorin Vladu

你做了什麼所以fa R' – 2012-07-18 23:05:30

您可以使用CSS這樣

#fixed{ 
    margin:0 px auto; 
    width: 960px; 
}  
#container { 
    padding-left: 205px;  /* LC fullwidth */ 
    padding-right: 205px;  /* RC fullwidth + CC padding */ 
    background:#FFFF99; 
} 

#container .column { 
    position: relative; 
     float: left; 
    } 

    #center { 
     padding: 20px 0px 20px 0px;  /* CC padding */ 
     width: 100%; 
     height:auto; 
    } 
    #content{padding:10px;height:auto;border-right:1px dashed;color:#fed88e;} 

    #right{ 
     width: 205px;    /* RC width */ 
     padding: 0px;   /* RC padding */ 
     margin-right: -100%; 
    } 
#left{ 
width : 205px; 
padding: 0px 
margin-left:-100%; 

}

和HTML像

<div id="fixed"> 
<div id="container"> 
<div id="center" class="column"></div> 
<div id="left" class="column"></div> 
<div id="right" class="column"></div> 
</div> 
</div>

來源

2012-07-19 03:20:39

它不適用於我：http://jsfiddle.net/EAN6N/ – biziclop 2012-07-19 05:30:31

絕對不行。這就像 | ------- center ------ | | --left-- || --right-- | – MaVRoSCy 2012-07-19 05:40:19

我敢肯定，你可以得到你想要使用這個東西：

The Holy Grail 3 column liquid layout

只需添加：

#col1 { margin: 0 auto; width: 960px; }

您可能需要額外的tinkerage。

來源

2012-07-18 23:55:30 wanovak

這不是OP要求的。 OP想要一個固定居中的div，並且側面的div大小應該是auto。這完全相反（固定邊divs和自動中心div）。 – MaVRoSCy 2012-07-19 05:36:20

一些失敗的想法：http://jsfiddle.net/kC35U/，http://jsfiddle.net/kC35U/1/

最終的解決方案：

http://jsfiddle.net/kC35U/4/

HTML與額外的標記：

<div id="bar"> 
    <div class="left"><div>LEFT</div></div> 
    <div class="right"><div>RIGHT</div></div> 
    <div class="center">CENTER</div> 
</div> 
<div> 
    Footer 
</div>

CSS：

中心DIV，固定無線dth，居中，沒有什麼特別的：

.center { 
    width: 500px; 
    margin: 0 auto; 
}

現在，製作兩個50％寬的包裝divs左/右側。他們的高度設置爲0，以保持所有三個div的頂部對齊很好：

.left { 
    width: 50%; 
    margin-right: auto; 
    height: 0; 
} 

.right { 
    width: 50%; 
    margin-left: auto; 
    height: 0; 
}

內部的div填補他們的父母，但我們切斷中心div的一半寬度。

.left > div { 
    margin-right: 250px; 
} 

.right > div { 
    margin-left: 250px; 
}

如果你想要把東西三列的下方，那麼你必須要使用一些怪異的招數：

.left:after, .right:after { 
    content: ''; 
    float: left; 
    height: 0; 
} 

#bar + * { 
    clear: both; 
}

來源

2012-07-19 00:08:35 biziclop

yeap，作品+1！ – MaVRoSCy 2012-07-19 05:55:14

css在固定元素旁邊浮動

回答

相關問題