兩個div列。動態寬度的一個

Question

我想要實現的是獲得divs，彼此相鄰。一個是菜單，寬度爲150像素，屏幕左側，第二個，應該填充其餘的容器。

多數民衆贊成我想出了： http://jsfiddle.net/Ln49F/3/

但是，角逐DIV也菜單中的「下」，並與文字工作，移動它往右一點是不可能的。是否有可能使div「內容」在某種程度上爲「100％-150px」寬，並放在菜單div旁邊？

爲了實現這樣的事情： http://jsfiddle.net/Ln49F/4/ 浮動離開，放格「旁邊的」菜單DIV，和填充效果很好，但我不知道如何使它成爲廣爲div容器的其餘部分。

Answer 1

取出width:100%（就交給auto，這是默認值），並使用此：

div.content{ 
    margin-left:150px; 
    background: green;   
} 

jsfiddle。

Answer 2

這樣寫：

CSS

.wrapper{ 
    overflow:hidden; 
    padding-bottom:10px; 
} 
.first{ 
    float:left; 
    height:200px; 
    width:150px; 
    background:red; 
} 
.second{ 
    overflow:hidden; 
    height:200px; 
    background:green; 
} 

HTML

<div class="wrapper"> 
    <div class="first">first</div> 
    <div class="second">second</div> 
</div> 

入住這http://jsfiddle.net/TbRuB/10/

OR

您還可以display:table屬性實現這一點，但它的工作，直到上述IE8 &。

入住這http://jsfiddle.net/TbRuB/12/

Answer 3

檢查this fiddle出來。基本上，使用box-sizing，一些填充和負邊距，可以將兩個元素排列到其容器的頂部。並讓內容框伸展其父項的範圍。

Answer 4

div.container{ 
width: 90%; 
background: red; 
    display: inline-block;  
} 

div.menu{ 
width: 150px; 
float: left; 
background: blue; 
display: inline;  
} 

div.content{ 
    display: inline; 
    float: left; 
    width: 65%; 
    background: green; 
    padding-left: 20px;  
} 

look at this

我希望這有助於

Answer 5

你可以查看你的第一小提琴，但更新後根據您的規範，這裏的工作：http://jsfiddle.net/ramsesoriginal/Ln49F/12/

這是通過指定右頁邊距在第二個div，並簡單地把寬度留在自動。

的HTMLis不變：

<div class="container"> 
    <div class="menu">Menu to the left</div> 
    <div class="content">Content of site<br>x<br><br><br><br><br></div> 
</div> 

而CSS是相當與你相似：

div.container{ 
     width: 90%; 
     height: 150px; 
     background: red;   
    } 

    div.menu{ 
     width: 150px; 
     height: 100px; 
     float: left; 
     background: blue;   
    } 

    div.content{ 
     margin-left: 150px; 
     background: green;   
    } 

我拿走了從div.content的width: 100%;與margin-left: 150px; 取代它，你可以看到，你幾乎沒有錯！

編輯：獎金：（假的）等高欄！

我用一些代碼更新了小提琴，用CSS3創建「faux columns」，這樣看起來好像兩個div都向下展開到容器的底部。你可以在這裏看到它：http://jsfiddle.net/ramsesoriginal/Ln49F/13/我不知道你是否真的需要它，但這是這種場景的共同需求。

我簡單地放置漸變背景在容器上，用一個單一的硬止擋件的中間位置：

background: linear-gradient(left, blue 150px, green 150px); 

然後我擴大了與各種供應商前綴：

background: -moz-linear-gradient(left, blue 150px, green 150px); /* FF3.6+ */ 
background: -webkit-gradient(linear, left top, right top, color-stop(150px,blue), color-stop(150px,green)); /* Chrome,Safari4+ */ 
background: -webkit-linear-gradient(left, blue 150px, green 150px); /* Chrome10+,Safari5.1+ */ 
background: -o-linear-gradient(left, blue 150px, green 150px); /* Opera 11.10+ */ 
background: -ms-linear-gradient(left, blue 150px, green 150px); /* IE10+ */ 
background: linear-gradient(left, blue 150px, green 150px); /* W3C */ 

我不不知道你是否需要它，但有時這可能是非常有用的！

Answer 6

使用簡單的解決方案

<div class="container"> 
<div class="menu">Menu to the left</div> 
<div class="content">Content of site<br>x<br><br><br><br><br></div> 
</div> 

div.container{ 
width: 90%; 
height: 150px; 
background: red;   
} 

div.menu{ 
width: 150px; 
height: 100px; 
float: left; 
background: blue;   
} 

div.content{ 
background: green;   
margin-left: 150px; 
} 

http://jsfiddle.net/thirtydot/Ln49F/16/