2

質問：

私は以下の HTML を持っており、2 つの div を水平方向に並べて配置したいと考えています。
左の div は、右の div と同じ高さでなければなりません (または、左の div の高さが右の div の高さより大きい場合はその逆)。
左の div のサイズはピクセル単位の固定サイズにする必要があり、右の div はコンテナーを埋めるように拡張する必要があります (幅を設定する必要はありません)。この場合は 500px です。

最終的にラッパーのサイズをパーセントで設定したいので、2 番目の div に幅を設定したくありません。

以下の HTML では、2 番目の 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

変化する：

#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 に答える
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 の幅に応じて残りのスペースをすべて消費するようにします。トリック。

または試してみてください誰かが困っているのですが、テーブルを使用すると、問題がなければ簡単に解決できます。

お役に立てれば

于 2012-06-08T06:38:54.383 に答える
0

境界線によって<div>s が大きくなりすぎ2pxているため ( by )、境界線を削除するか ( jsFiddle Example )、ネガティブを作成しますmargin( jsFiddle Example )。

于 2012-06-08T06:47:36.883 に答える
0

古いブラウザーを捨てたい場合は、CSS テーブルを試してください

于 2012-06-08T06:51:09.670 に答える