Làm cách nào để tạo một div lấp đầy chiều rộng còn lại?
<div id="Main" style="width: 500px;">
<div id="div1" style="width: 100px;"></div>
<div id="div2"></div>
<div id="div3" style="width: 100px; float: right;"></div>
</div>
Làm thế nào tôi có div2thể lấp đầy phần còn lại?
Câu trả lời:
Hãy thử một cái gì đó như sau:
<style>
#divMain { width: 500px; }
#left-div { width: 100px; float: left; background-color: #fcc; }
#middle-div { margin-left: 100px; margin-right: 100px; background-color: #cfc; }
#right-div { width: 100px; float: right; background-color: #ccf; }
</style>
<div id="divMain">
<div id="left-div">
left div
</div>
<div id="right-div">
right div
</div>
<div id="middle-div">
middle div<br />bit taller
</div>
</div>
div sẽ tự nhiên chiếm 100% chiều rộng của vùng chứa của chúng, không cần đặt chiều rộng này một cách rõ ràng. Bằng cách thêm một lề trái / phải giống như hai divs bên, nội dung của chính nó buộc phải nằm giữa chúng.
Lưu ý rằng "div giữa" đi sau "div bên phải" trong HTML
Giải pháp này thậm chí còn đơn giản hơn giải pháp được cung cấp bởi Leigh. Nó thực sự dựa trên nó.
Ở đây, bạn có thể nhận thấy rằng phần tử giữa (trong trường hợp của chúng tôi là với "content__middle"lớp) không có bất kỳ thuộc tính chiều nào được chỉ định - không có chiều rộng, không có phần đệm, cũng không có thuộc tính liên quan đến lề - mà chỉ có một overflow: auto;(xem chú thích 1).
Ưu điểm lớn là bây giờ bạn có thể chỉ định a max-widthvà a min-widthcho các phần tử trái và phải của mình . Điều này thật tuyệt vời cho bố cục linh hoạt .. do đó bố cục đáp ứng :-)
lưu ý 1: so với câu trả lời của Leigh, nơi bạn cần thêm margin-left& margin-rightthuộc tính vào "content__middle"lớp.
Ở đây, các phần tử bên trái và bên phải (với các lớp "content__left"và "content__right") có chiều rộng cố định (tính bằng pixel): do đó được gọi là bố cục không linh hoạt.
Demo trực tiếp trên http://jsbin.com/qukocefudusu/1/edit?html,css,output
<style>
/*
* [1] & [3] "floats" makes the 2 divs align themselves respectively right & left
* [2] "overflow: auto;" makes this div take the remaining width
*/
.content {
width: 100%;
}
.content__left {
width: 100px;
float: left; /* [1] */
background-color: #fcc;
}
.content__middle {
background-color: #cfc;
overflow: auto; /* [2] */
}
.content__right {
width: 100px;
float: right; /* [3] */
background-color: #ccf;
}
</style>
<div class="content">
<div class="content__left">
left div<br/>left div<br/>left div<br/>left div<br/>left div<br/>left div<br/>
</div>
<div class="content__right">
right div<br/>right div<br/>right div<br/>right div<br/>
</div>
<div class="content__middle">
middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br />bit taller
</div>
</div>
Ở đây, các phần tử bên trái và bên phải (với các lớp "content__left"và "content__right") có chiều rộng thay đổi (tính bằng phần trăm) nhưng cũng có chiều rộng tối thiểu và tối đa: do đó được gọi là bố cục linh hoạt.
Demo trực tiếp trong một bố cục linh hoạt với các max-widththuộc tính http://jsbin.com/runahoremuwu/1/edit?html,css,output
<style>
/*
* [1] & [3] "floats" makes the 2 divs align themselves respectively right & left
* [2] "overflow: auto;" makes this div take the remaining width
*/
.content {
width: 100%;
}
.content__left {
width: 20%;
max-width: 170px;
min-width: 40px;
float: left; /* [1] */
background-color: #fcc;
}
.content__middle {
background-color: #cfc;
overflow: auto; /* [2] */
}
.content__right {
width: 20%;
max-width: 250px;
min-width: 80px;
float: right; /* [3] */
background-color: #ccf;
}
</style>
<div class="content">
<div class="content__left">
max-width of 170px & min-width of 40px<br />left div<br/>left div<br/>left div<br/>left div<br/>left div<br/>left div<br/>
</div>
<div class="content__right">
max-width of 250px & min-width of 80px<br />right div<br/>right div<br/>right div<br/>right div<br/>
</div>
<div class="content__middle">
middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br />bit taller
</div>
</div>
Đã kiểm tra trên BrowserStack.com trên các trình duyệt web sau:
overflowtạo ra một ngữ cảnh định dạng khối không? sẽ display: flexcó tác dụng tương tự?
overflow-y: hiddenvì nó a) chiều rộng được phép được đặt, b) có hỗ trợ trình duyệt tốt nhất và c) không phải là một bảng
Hộp linh hoạt là giải pháp - và chúng thật tuyệt vời. Tôi đã muốn một cái gì đó như thế này từ css trong một thập kỷ. Tất cả những gì bạn cần là thêm display: flexvào phong cách của mình cho "Chính" và flex-grow: 100(trong đó 100 là tùy ý - không quan trọng bằng chính xác 100). Hãy thử thêm kiểu này (màu sắc được thêm vào để làm cho hiệu ứng hiển thị):
<style>
#Main {
background-color: lightgray;
display: flex;
}
#div1 {
border: 1px solid green;
height: 50px;
display: inline-flex;
}
#div2 {
border: 1px solid blue;
height: 50px;
display: inline-flex;
flex-grow: 100;
}
#div3 {
border: 1px solid orange;
height: 50px;
display: inline-flex;
}
</style>
Thông tin thêm về hộp flex tại đây: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Sử dụng thuộc tính CSS Flexbox flex-grow để đạt được điều này.
.main {
display: flex;
}
.col-1, .col-3 {
width: 100px;
}
.col-2 {
flex-grow: 1;
}<div class="main">
<div class="col-1" style="background: #fc9;">Left column</div>
<div class="col-2" style="background: #eee;">Middle column</div>
<div class="col-3" style="background: #fc9;">Right column</div>
</div>Mặc dù bitmuộn trong việc đăng câu trả lời, đây là một cách tiếp cận thay thế mà không cần sử dụng lề.
<style>
#divMain { width: 500px; }
#div1 { width: 100px; float: left; background-color: #fcc; }
#div2 { overflow:hidden; background-color: #cfc; }
#div3 { width: 100px; float: right; background-color: #ccf; }
</style>
<div id="divMain">
<div id="div1">
div 1
</div>
<div id="div3">
div 3
</div>
<div id="div2">
div 2<br />bit taller
</div>
</div>
Phương pháp này hoạt động giống như phép thuật, nhưng đây là lời giải thích:) \
Các Div phải chiếm không gian còn lại phải là một lớp .. Các div khác có thể là (các) id nhưng chúng phải có chiều rộng ..
CSS :
#main_center {
width:1000px;
height:100px;
padding:0px 0px;
margin:0px auto;
display:block;
}
#left {
width:200px;
height:100px;
padding:0px 0px;
margin:0px auto;
background:#c6f5c6;
float:left;
}
.right {
height:100px;
padding:0px 0px;
margin:0px auto;
overflow:hidden;
background:#000fff;
}
.clear {
clear:both;
}
HTML :
<body>
<div id="main_center">
<div id="left"></div>
<div class="right"></div>
<div class="clear"></div>
</div>
</body>
Liên kết sau có mã đang hoạt động, sẽ giải quyết vấn đề vùng phủ sóng còn lại.
Tôi đang tìm giải pháp cho vấn đề ngược lại, trong đó tôi cần một div có chiều rộng cố định ở trung tâm và một div có chiều rộng linh hoạt ở hai bên, vì vậy tôi đã nghĩ ra điều sau và nghĩ rằng tôi sẽ đăng nó ở đây trong trường hợp có ai cần nó.
#wrapper {
clear: both;
width: 100%;
}
#wrapper div {
display: inline-block;
height: 500px;
}
#center {
background-color: green;
margin: 0 auto;
overflow: auto;
width: 500px;
}
#left {
float: left;
}
#right {
float: right;
}
.fluid {
background-color: yellow;
width: calc(50% - 250px);
}<div id="wrapper">
<div id="center">
This is fixed width in the centre
</div>
<div id="left" class="fluid">
This is fluid width on the left
</div>
<div id="right" class="fluid">
This is fluid width on the right
</div>
</div>Nếu bạn thay đổi chiều rộng của #centerphần tử thì bạn cần cập nhật thuộc tính chiều rộng của .fluidthành:
width: calc(50% - [half of center width]px);