用 CSS 表将两个 div 并排放置答案

【问题标题】：place two divs next to each other with css table用 CSS 表将两个 div 并排放置
【发布时间】：2012-09-06 12:14:12
【问题描述】：

我想将两个 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 具有固定宽度..

【问题讨论】：

标签： html css internet-explorer

【解决方案1】：

以这种方式更改 CSS：

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

如果您在其中发现一些问题，请告诉我们！

【讨论】：

图片没有填满#right div。此外，它需要设置多个宽度，这很烦人。我只想设置适用于网站每个页面的页面宽度（在本例中为#container div），无论其内容如何。 #left 和#right div 的宽度分布应该完全由#right div 的内容宽度决定。我将相应地编辑我的问题

【解决方案2】：

我认为你设置了

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

你的问题解决了。

【讨论】：

我的重点是我希望从其他维度推断宽度：600px。我意识到我没有说得很清楚。我将编辑我的问题。

【解决方案3】：

看看这个。它有效。

 <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>

【讨论】：

这需要在三个不同的地方设置宽度属性。我不希望宽度为 50%。我只希望图像的宽度为 400 像素，高度为 300 像素。所有其他维度都应该从中推断出来。

【解决方案4】：

我的 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;
        }

【讨论】：

那不行，右边的div不是靠右对齐的，而是放在左边的旁边。
我并没有明确说明这是强制性的，抱歉。我相应地编辑了我的问题。