问题:
我有下面的 HTML 并希望两个 div 水平相邻。
左侧 div 的高度应与右侧 div 的高度相同(如果左侧 div 的高度大于右侧 div 的高度，则反之亦然)。
左侧 div 的大小应为固定像素大小，右侧 div 应扩展以填充容器(无需设置宽度)，在本例中为 500 像素。
我不想在第二个 div 上设置宽度，因为最终我想将包装器的大小设置为百分比。
在下面的 HTML 中，第二个 div 位于第一个 div 的下方。 谁能告诉我如何根据我的意愿解决这个问题(也应该在 IE 9 中工作)？
<!DOCTYPE html>
<html>
<head>
<title>Index</title>
<style type="text/css" media="all">
#wrapper
{
width: 500px; /* or say, 25% */
border: 1px solid black;
overflow: hidden; /* add this to contain floated children */
}
#first
{
width: 100px;
float:left;
border: 1px solid red;
}
#second
{
border: 1px solid green;
width: 400px; /* don't want this */
float: left;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="first">
Test left
<br />
Test left
</div>
<div id="second">
Test right
<br />
Test right
<br />
Test right
Auf der Registerkarte 'Einfügen' enthalten die Kataloge Elemente, die mit dem generellen Layout des Dokuments koordiniert werden sollten. Mithilfe dieser Kataloge können Sie Tabellen, Kopfzeilen, Fußzeilen, Listen, Deckblätter und sonstige Dokumentbausteine einfügen. Wenn Sie Bilder, Tabellen oder Diagramme erstellen, werden diese auch mit dem aktuellen Dokumentlayout koordiniert. Die Formatierung von markiertem Text im Dokumenttext kann auf einfache Weise geändert werden, indem Sie im Schnellformatvorlagen-Katalog auf der Registerkarte 'Start' ein Layout für den markierten Text auswählen. Text können Sie auch direkt mithilfe der anderen Steuerelemente auf der Registerkarte 'Start' formatieren. Die meisten Steuerelemente ermöglichen die Auswahl zwischen dem Layout des aktuellen Designs oder der direkten Angabe eines Formats. Wählen Sie neue Designelemente auf der Registerkarte 'Seitenlayout' aus, um das generelle Layout des Dokument s zu ändern. Verwenden Sie den Befehl zum Ändern des aktuellen Schnellformatvorlagen-Satzes, um die im Schnellformatvorlagen-Katalog verfügbaren Formatvorlagen zu ändern. Die Design- und die Schnellformatvorlagen-Kataloge stellen beide Befehle zum Zurücksetzen bereit, damit Sie immer die Möglichkeit haben, das ursprüngliche Layout des Dokument s in der aktuellen Vorlage wiederherzustellen. Auf der Registerkarte 'Einfügen' enthalten die Kataloge Elemente, die mit dem generellen Layout des Dokuments koordiniert werden sollten.
</div>
</div>
</body>
</html>
最佳答案
如果你使用边框那么你的宽度有额外的 2px。所以添加 4px 到 wrapper 宽度
#wrapper
{
width: 504px; /* or say, 25% */
border: 1px solid black;
overflow: hidden; /* add this to contain floated children */
}
#first
{
width: 100px;
float:left;
border: 1px solid red;
}
#second
{
border: 1px solid green;
width: 400px; /* don't want this */
float: left;
}
更新:-为这个简单的事情使用表格布局
#wrapper
{ display:table-row;
width: 500px; /* or say, 25% */
border: 1px solid black;
overflow: hidden; /* add this to contain floated children */
}
#first
{ display:table-cell;
width: 100px;
border: 1px solid red;
}
#second
{ display:table-cell;
border: 1px solid green;
}
关于css - 如何水平对齐两个 div，容器宽度以百分比表示？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10944008/