2

问题：

我有下面的 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>
4

7 回答 7

4

如果您使用边框，那么您的宽度有额外的 2px。所以将 4px 添加到包装宽度

#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; 
         }
于 2012-06-08T06:30:08.547 回答
0

尝试将此添加到您的CSS：

div{
  margin:0;
  border:0;
}

并删除之前指定的任何边框......否则减少你想要在右边的 div 的宽度

于 2012-06-08T06:33:54.087 回答
0

检查小提琴 - http://jsfiddle.net/bwuzm/

边框增加了 2px 宽度

于 2012-06-08T06:37:52.410 回答
0

我想你可能想看看css 灵活的盒子模型

我不知道是否所有浏览器都支持这一点，但如果你希望#wrapper 灵活，#first 具有固定大小，然后 #second 根据#wrapper 宽度消耗所有剩余空间，也许这会做诀窍。

或尝试有人遇到麻烦的答案，如果您没问题，使用 table 是一个快速的解决方案。

希望这可以帮助

于 2012-06-08T06:38:54.383 回答
0

边框使<div>s 太大（by 2px），所以要么删除边框（jsFiddle Example），要么创建一个负数margin（jsFiddle Example）。

于 2012-06-08T06:47:36.883 回答
0

如果你想放弃旧的浏览器，试试CSS Tables

于 2012-06-08T06:51:09.670 回答
0

改变：

#wrapper 
        { 
            width: 504px; /* or say, 25% */
            border: 1px solid black; 
            overflow: hidden; /* add this to contain floated children */ 
        }

因为#first 和#second 块周围的边框在块的每一侧增加了1px。例子

或者删除带有边框的样式添加你会看到一切都会落到地方。例子

并将 display: inline-block 添加到 #first 和 #second 块。例子

于 2012-06-08T06:58:23.863 回答