Question

我想实现这个目标：

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

Sample html on jsFiddle.

是否可以将两个div并排放置，留下第二个div以及所有剩余空间？

Answer 1

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

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

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

请注意，div上的width CSS属性仅适用于内容，因此您需要将margin-left设置为width的总和，{{1第一个div的}}，border和margin属性。

Here是您的jsfiddle的更新版本。如果您对此有任何疑问，请与我们联系。

Answer 2

以下是如何完成的事情：

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

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

Answer 3

这是：

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（此时正在播放）

希望这有帮助！

Answer 4

试试这个：

<html>

<head>
    <title>Tabla de contenidos - Template</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">This DIV has a width of 60px.</div>
    <div id="divright" >This DIV occupies the rest of the page...</div>
</body>

</html>

62px的余量是为了避免重叠每个边界的1个额外px。

Answer 5

另一种选择是使用flexible box model

最近的firefox，chrome和safari支持此工作提案。

可以使用flexie.js.

将其移植到不受支持的浏览器

Answer 6

有新方法来安排元素whit CSS3 点击此页面Flexbox Froggy，这是一款通过编写CSS代码帮助Froggy和朋友的游戏！

使用justify-content属性将此青蛙引导到右侧的lilypad，该属性水平对齐项目并接受以下值：

flex-start ：项目与容器的左侧对齐。
flex-end ：项目对齐容器的右侧。
中心：项目在容器的中心对齐。
空格 - ：项目之间的间距相等。
space-around ：项目周围的间距相等。

如何将第二个宽度为100％的两个div并排放置？

6 个答案: