Question

我想把两个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 ..

Answer 1

以这种方式更改CSS：

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

如果您在此找到一些问题，请告诉我们！

Answer 2

我认为你设置了

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

你的问题解决了。

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

Answer 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;
        }

使用css表将两个div放在一起

4 个答案:

以这种方式更改CSS：