如何将两个div并排放置，其中第二个div的宽度为100%？

Question

如何将两个div并排放置，其中第二个div的宽度为100%？

20

我想要实现这个：

width=60px         width = remaining space
|------|    |-----------------------------------|
| div1 |    | Loren ipsun...                    |
|------|    |                                   |
            |                            div2   |
            |-----------------------------------|

在 jsFiddle 上的示例 html。

是否可能将两个 div 并排放置，使第二个 div 使用所有剩余空间？

- BrunoLM

6个回答

1

试试这个：

<html>
<head>
    <title>目录表 - 模板</title>
    <style type="text/css">
        div { 
            border: 1px solid #000000;
        }
        #divleft{
            width: 60px;
            float: left;
        }
        #divright{
            display: block;
            margin-left: 62px;
        }
</style> 
</head>
<body>
    <div id="divleft">这个 DIV 的宽度是 60 像素。</div>
    <div id="divright" >这个 DIV 占据了页面的其余部分...</div>
</body>
</html>

62 像素的边距是为了避免重叠每个边框的额外 1 像素。

- amypellegrini

1

以下是如何完成的：

.image {
background:green;
color:green;
height:60px;
position:absolute;
width:60px;
}

.content {
background:blue;
color:white;
margin-left:60px;
   }

- Ayaz Malik

你需要从.content中移除width:100%;，否则它会使内容块的大小等于视口大小，导致所有内容的总宽度大于视口，从而出现水平滚动条。 - AgentConundrum

当您使用绝对定位时，应将其父div的位置设置为相对于IE7。 - Fatih Acet

绝对定位也是危险的，因为我们不知道它将在哪种上下文中使用。只要它放置在页面顶部或相对定位块内部，这应该没问题，但否则它可能会表现出意外行为。你真的不需要它被绝对定位。它在这里并没有增加太多价值。 - AgentConundrum

1

这里是：

CSS：

#container { background: silver; width: 100% }


.image
{
    background: green; color: green;
    width: 60px; height: 60px;
    float: left;

}
.content
{
    background: blue; color: white;
   margin-left: 60px;


}

以及在jsFiddle上（它目前有些问题）

希望这能帮到你！

- ryryan

0

现在有一种新的方法可以使用CSS3来排列元素。请查看这个页面Flexbox Froggy，这是一个游戏，你需要编写CSS代码来帮助Froggy和他的朋友们！

通过使用justify-content属性，将这只青蛙引导到右侧的睡莲上，该属性可以水平对齐项目，并接受以下值：

flex-start：项目与容器的左侧对齐。
flex-end：项目与容器的右侧对齐。
center：项目在容器中心对齐。
space-between：项目之间均匀分布。
space-around：项目周围均匀分布。

- Lucas Matos

0

另一个选择是使用弹性盒模型

这个工作方案在最近的Firefox、Chrome和Safari中得到支持。

可以使用flexie.js将其移植到不支持的浏览器中。

- tim

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- AgentConundrum · Accepted Answer

只需对第一个div进行浮动，并设置第二个div的margin-left以适应第一个div的宽度。像这样：

div.one {
  width: 60px;
  float: left;
}

div.two {
  margin-left: 60px;
}

记住，div元素上的width CSS属性只适用于内容，因此您需要将第一个div元素的margin-left设置为width、border、margin和padding属性的总和。

这里是您的jsfiddle更新版本。如果您有任何问题，请让我知道。