如何在第二个宽度为100%的地方并排放置两个div?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (91)

我要做到这一点:

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

jsFiddle上的示例html。

是否有可能将两个div并排放置在第二个div与所有剩余空间?

提问于
用户回答回答于

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;


}
用户回答回答于

只需浮动第一个div,并设置第二个div的左边边距,以适应第一个div的宽度。就像这样:

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

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

记住div上的css属性仅应用于内容,因此需要设置margin-left为第一个div的属性中width,border,margin, 和padding属性的总和。

扫码关注云+社区

领取腾讯云代金券