Hai cột div. Chiều rộng động của một

Question

Điều tôi đang cố gắng đạt được, là nhận được divs, bên cạnh nhau. Một sẽ là menu, chiều rộng 150px, bên trái màn hình và thứ hai, nên lấp đầy phần còn lại của vùng chứa.

Thats những gì tôi đã đưa ra: http://jsfiddle.net/Ln49F/3/

Tuy nhiên, tranh div cũng là "dưới" trình đơn, và làm việc với văn bản, di chuyển nó sang phải một chút là không thể. Có thể, để làm cho div "nội dung" được rộng cho "100% - 150px" bằng cách nào đó, và được đặt bên cạnh div menu?

Để đạt được một cái gì đó như thế: http://jsfiddle.net/Ln49F/4/ phao trái, đặt div "bên cạnh" menu div, và đệm hoạt động tốt, nhưng tôi không biết làm thế nào để làm cho nó trở thành rộng cho phần còn lại của div container.

Answer 1

Đi ra width:100% (cứ để đó cho auto, đó là mặc định) và sử dụng này:

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

jsfiddle.

Answer 2

Viết như thế này:

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> 

Kiểm tra này http://jsfiddle.net/TbRuB/10/

HOẶC

Bạn cũng có thể đạt được điều này với thuộc tính display:table nhưng nó hoạt động cho đến IE8 & ở trên.

Kiểm tra điều này http://jsfiddle.net/TbRuB/12/

Answer 3

Kiểm tra this fiddle. Về cơ bản, sử dụng box-sizing, một số phần đệm và lề âm, bạn có thể xếp hai phần tử lên trên cùng của vùng chứa của chúng. và có hộp nội dung kéo dài phần mở rộng của bố mẹ.

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

tôi hy vọng điều này sẽ giúp

Answer 5

Bạn có thể xem fiddle đầu tiên của bạn, nhưng cập nhật để làm việc theo spec của bạn, ở đây: http://jsfiddle.net/ramsesoriginal/Ln49F/12/

này hoạt động bằng cách xác định lề phải trên div thứ hai và chỉ cần để lại chiều rộng trên tự động.

các HTMLis không thay đổi:

<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> 

Và CSS là khá tương tự như của bạn:

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;   
    } 

tôi mất đi những width: 100%; từ div.content và thay thế nó bằng margin-left: 150px; Như bạn thấy, bạn gần như đã đúng!

CHỈNH SỬA: THƯỞNG: (giả) Cột chiều cao bình đẳng!

Tôi đã cập nhật mã fiddle bằng một số mã để tạo "faux columns" bằng CSS3, để có vẻ như cả hai div đang mở rộng xuống dưới cùng của vùng chứa. Bạn có thể thấy nó ở đây: http://jsfiddle.net/ramsesoriginal/Ln49F/13/ Tôi không biết nếu bạn thực sự cần nó, nhưng nó là một yêu cầu chung cho loại kịch bản.

Tôi chỉ đơn giản là đặt một nền gradient trên thùng sơn, với một chặng dừng cứng duy nhất ở giữa:

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

Và sau đó tôi mở rộng rằng với tiền tố nhà cung cấp khác nhau:

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 */ 

I don' t biết nếu bạn cần nó, nhưng đôi khi điều này có thể rất hữu ích!

Answer 6

Sử dụng giải pháp đơn giản

<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/