0

2 つの div を隣り合わせに配置したいと思います。右側の div の幅はそのコンテンツによって決まり、コンテナー div の右側に揃える必要があります。左の div の幅は、ページの残りの部分にまたがる必要があります。

私は次のコードでこれを行うことができました（明らかにオリジナルの最小化されたバージョン）：

<html>
<head>
    <style>
        #container {
            border: 1px solid black;
            display: table;
            width: 1000px;
        }

        #left {
            display: table-cell;
            vertical-align: top;
            width: 100%;
        }
        #right {
            display: table-cell;
            vertical-align: top;
        }
        #image {
            width: 400px;
            height: 300px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="left">
            blabla
        </div>
        <div id="right">
            <div id="image">

            </div>
        </div>
    </div>
</body>
</html>

Chrome と Firefox の両方で完全に動作しますが、IE では #right div が左の div の下に表示されます。

アイデアは、 #container と #image のみが明示的に設定されたディメンションを持つということです。他のすべての次元は、何らかの方法で巧妙に整列することによって、それらから推測する必要があります。display: table-cell css プロパティはこれをうまく実現しますが、他には何もしていないようです...

誰かが解決策を知っていますか? 「divを隣り合わせに配置する」という質問はすでにたくさんありますが、すべての解決策は、すべてのdivの幅が固定されていることに依存しているようです..

4

4 に答える 4

4

CSS を次のように変更します。

#left {
    float: left;
    width: 50%;
    padding: 0;
    margin: 0;
}
#right {
    float: right;
    width: 50%;
    padding: 0;
    margin: 0;
}

これに問題がある場合はお知らせください。

于 2012-09-06T12:23:09.670 に答える
0

私はあなたが設定したと思います

#left{width:600px;float:left};
#right{width:400px;float:left};

あなたの問題は解決しました。

于 2012-09-06T12:26:13.077 に答える
0

これを見てください。できます。

 <html>
<head>
    <style>
        #container {
            border: 1px solid black;
            display: table;
            width: 1000px;
            float:left;
        }

        #left {
            display: table-cell;
            vertical-align: top;
            width: 57%;
            float: left;
        }
        #right {
            display: table-cell;
            vertical-align: top;            
            float: right;
        }
        #image {
            width: 400px;
            height: 300px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="left">
            blabla
        </div>
        <div id="right">
            <div id="image">

            </div>
        </div>
    </div>
</body>
</html>
于 2012-09-06T12:27:41.947 に答える
-1

MacにIEがありませんでした。私が理解しているように、このように書いてください：

#container {
            border: 1px solid black;
            display: table;
            width: 1000px;
            white-space:nowrap;
        }

        #left,#right {
            display: table-cell;
            vertical-align: top;
            white-space:normal;
        }
        #image {
            width: 400px;
            height: 300px;
            background-color: red;
        }
于 2012-09-06T12:23:56.657 に答える