[英]How do I put two <div>s side-by-side, with the left <div> taking up 100% of the space not taken up by the right <div>?
我有一個基本問題。 兩個<div>身邊逐側，左側<div>需要能夠以具有“靈活”的寬度，如在當<div>上未顯示右，左<div>將然后拉伸到100％。
我的代碼目前如下，但不滿足上述要求。
<html>
<head>
<style>
#container {
display: block;
}
#box-left {
width: 100%;
height: 100px;
background-color: red;
float: left;
}
#box-right {
width: 15%;
height: 100px;
background-color: blue;
float: right;
}
</style>
</head>
<div id="container">
<div id="box-left"></div>
<div id="box-right"></div>
</div>
<body>
</body>
任何指針將不勝感激。
#container {
display: table;
table-layout: fixed;
}
#id-right, #id-left {
display: table-cell;
float: none;
}
#id-left {
/* no width */
}
#id-right {
width: 15%;
}
不幸的是，這在IE6中不起作用，但除此之外，它還可以解決問題。
您是否嘗試過使用max-width:100%; 為“左框”？
如果顛倒#box-left和#box-right在HTML #box-right顯示順序，並從CSS的#box-left中刪除width屬性，那么它應該可以描述：
#box-left {
height: 100px;
background-color: red;
float: left;
}
...
<div id="container">
<div id="box-right"></div>
<div id="box-left"></div>
</div>
但是，您可能不希望該源順序，在這種情況下， <table>或CSS等效項是唯一允許您執行操作的HTML / CSS布局系統。
會將左div的寬度設置為您擁有的其余空間。 因此，由於您的方塊右為15％，因此將方塊左為85％
這是代碼：
#container {
display: block;
}
#box-left {
width: 85%;
height: 100px;
background-color: red;
float: left;
}
#box-right {
width: 15%;
height: 100px;
background-color: blue;
float: right;
}
如何使內部左div占用100％減去“右側固定寬度div”
[英]how to make inner left div take up 100% minus “right side fixed width div”
如何在不指定寬度的情況下並排浮動兩個div，同時保持正確的div最小？
[英]How do I float two divs side-by-side without specifying a width while keeping the right div minimal?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.