Question

问题：

我有以下HTML，并希望彼此水平放置两个div 左侧div应与右侧div具有相同的高度（反之亦然，如果左侧div的高度大于右侧div的高度）。
左侧div的大小应为像素的固定大小，右侧div应扩展以填充容器（无需设置宽度），在本例中为500px。

我不想在第二个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>

Answer 1

如果你正在使用边框，那么你的宽度还有2px.So将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; 
         }

Answer 2

尝试将此添加到您的css：

div{
  margin:0;
  border:0;
}

删除之前指定的任何边框...否则减少右边所需div的宽度

Answer 3

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

边框正在添加额外的2px宽度

Answer 4

我想你可能想看看css flexible box model

我不知道是否所有浏览器都支持这个，但是如果你想让#wrapper变得灵活，＃first要有固定大小，那么#second要根据#wrapper宽度消耗所有剩余空间，也许这样就可以了。

或试试有人遇到麻烦的答案，使用表格是一个快速的解决方案，如果你没事的话。

希望这有帮助

Answer 5

边框使<div>太大（2px}，因此请删除边框（jsFiddle Example）或创建否定margin（{{ 3}}）。

Answer 6

如果您想放弃旧浏览器，请尝试CSS Tables

Answer 7

变化：

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

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

或删除带边框添加的样式，您将看到所有内容都会落入到位。 Example

将display：inline-block添加到#first和#second块。 Example

如何水平对齐两个div，容器宽度为百分比？

7 个答案: