0

我想将两个 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 显示在左侧的下方。

这个想法是只有#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 回答