讓div在邊欄後留下剩餘空間

我正嘗試在這裏用側邊欄和右側的內容部分創建一個非常常見的佈局。我的邊欄部分的寬度爲fixed（這裏爲120px），我希望右側的容器佔據頁面的剩餘空間（右邊距60px）。讓div在邊欄後留下剩餘空間

這裏的標記的樣子：

<body> 
    <div class="wrapper"> 
     <div class="content"> 
      <div class="left-sidebar"> 
       <ul class="sidebar-menu"> 
        <li>Item 1</li> 
        <li>Item 2</li> 
       </ul> 
      </div> 
      <div class="right-main-content"> 
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> 
      </div> 
     </div> 
    </div> 
</body>

這裏是上面的小提琴，以及：http://jsfiddle.net/6nLtp/

在我的情況下，發生了什麼是正確的容器會側邊欄下方，並採取100％的寬度。不過，我預計它會在側邊欄右側留下剩餘空間（頁面右側的邊距爲60px）。當我指定寬度時，容器與邊欄一起出現，但我不確定爲什麼需要這樣做？由於div元素（邊欄和右邊的容器都是浮動的），爲什麼正確的內容不能與邊欄一起粘貼？

來源

2013-12-13 user1240679

結帳http://stackoverflow.com/questions/580195/css-layout-2-column-fixed-fluid，具體的jsfiddle它鏈接到：HTTP： //jsfiddle.net/uEj55/1/ – stefancarlton

[CSS div divs each other]可能的重複]（http://stackoverflow.com/questions/446060/css-two-divs-next-to-each-other） – jstricker

我不知道，如果是好的代碼，但它爲我工作

.wrapper {width:100%;height:100%;} 
.left-sidebar {width:120px;height:200px;margin:20px 0 0 0;border:1px solid red; float:left;} 
.right-main-content{margin:20px 60px 0 140px; display:block;padding-top:5px; } 
.right-main-content p {border: 1px solid green;} 
.sidebar-menu{list-style-type:none;} 
.project-picture-bar{height:100px;width:100%;border-top:3px solid grey;border-bottom:3px solid grey;}

來源

2013-12-13 06:19:06

試試這個

CSS

.wrapper {width:100%;height:100%;display:inline-block;} 
.left-sidebar {max-width:120px;width:20%;height:200px;margin:20px 0 0 0;border:1px solid red;float:left;} 
.right-main-content{margin:20px 60px 0 0;width:80%;border: 1px solid green;float:right;}

DEM0

來源

2013-12-13 06:19:08

嘗試...... Updated Link

.wrapper {width:100%;height:100%;} 
.content{position:relative;} 
.left-sidebar {width:120px;height:200px;margin:20px 0 0 0;border:1px solid red; position:absolute; } 
.right-main-content{margin:20px 0px 0px 0px;padding:20px 10px;border: 1px solid green; position:absolute; left:140px;} 
.sidebar-menu{list-style-type:none;} 
.project-picture-bar{height:100px;width:100%;border-top:3px solid grey;border-bottom:3px solid grey;}

好運...享受

來源

2013-12-13 06:22:28

你可以向左<div>設置爲一個固定的位置和浮動權<div>左側。如果您這樣做，請確保您使用適當的邊距來抵消左側div的空間。

.wrapper { 
width:100%; 
height:100%; 
} 
.left-sidebar { 
    position: fixed; /*---- changed this --->*/ 
    width:120px; 
    height:200px; 
    margin:20px 0 0 0; 
    border:1px solid red; 
} 
.right-main-content{ 
    float: left;    /*---- changed this --->*/ 
    width: auto; 
    margin:20px 0 0 122px;  /*---- changed this --->*/ 
    border: 1px solid green; 
} 
.sidebar-menu{ 
    list-style-type:none; 
} 
.content{ 
    margin: 0px auto; 
}

工作示例：

http://jsfiddle.net/6nLtp/6/

來源

2013-12-13 06:22:32 leigero

使用float才達到的結果。

CSS

.wrapper {width:100%;height:100%;} 
.content{padding-top:20px;} 
.left-sidebar {width:120px;height:200px;margin:0 0 0 0;border:1px solid red;float:left;} 
.right-main-content{margin:0 60px 0 140px;border: 1px solid green;} 
.sidebar-menu{list-style-type:none;} 
.project-picture-bar{height:100px;width:100%;border-top:3px solid grey;border-bottom:3px solid grey;}

demo

來源

2013-12-13 06:24:42

就我而言，我確實給了元素的花車，但是我忘了在小提琴中寫下這些花車。爲什麼這個東西不起作用，如果我給這兩個容器浮動（我在我的例子中做過）？ – user1240679

不適用於兩者。只給浮球「左側」。右側邊欄將在剩餘空間中展開。按照「左邊欄」的寬度給它留下餘量。 –

讓div在邊欄後留下剩餘空間

回答

相關問題