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

I want to achieve this:

我想实现这个目标：

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

Sample html on jsFiddle.

在jsFiddle上示例html。

Is it possible to place two divs side-by-side leaving the second div with all remaining space?

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

6 个解决方案

#1

Just float the first div, and set the margin-left of the second div to accommodate the width of the first div. Something like this:

只需浮动第一个div，并设置第二个div的margin-left以容纳第一个div的宽度。像这样的东西：

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

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

Keep in mind that the width CSS property on the div only applies to the content, so you need to set the margin-left to be the sum of the width, border, margin, and padding properties of the first div.

请记住，div上的宽度CSS属性仅适用于内容，因此您需要将margin-left设置为第一个div的宽度，边框，边距和填充属性的总和。

Here is the updated version of your jsfiddle. Let me know if you have any questions about it.

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

#2

Here it is:

这里是：

CSS:

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;


}

And on jsFiddle (It's playing up at the moment)

并且在jsFiddle上（它正在播放）

Hope this helps!

希望这可以帮助！

#3

Here is how it will be done :

以下是它将如何完成：

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

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

#4

Try this:

尝试这个：

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

The 62px margin is to avoid overlap the 1 extra px of each border.

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

#5

another option is to use the flexible box model

另一种选择是使用灵活的盒子模型

this working proposal is supported in recent firefox, chrome, and safari.

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

it can be ported to unsupported browsers using flexie.js.

它可以使用flexie.js移植到不受支持的浏览器。

#6

there is new way to arrange elements whit CSS3 Check here this page Flexbox Froggy, a game where you help Froggy and friends by writing CSS code!

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

Guide this frog to the lilypad on the right by using the justify-content property, which aligns items horizontally and accepts the following values:

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

flex-start: Items align to the left side of the container.
flex-start：项目对齐容器的左侧。
flex-end: Items align to the right side of the container.
flex-end：项目对齐容器的右侧。
center: Items align at the center of the container.
center：项目在容器的中心对齐。
space-between: Items display with equal spacing between them.
space-between：项目显示，它们之间的间距相等。
space-around: Items display with equal spacing around them.
space-around：项目周围的间距相等。

#1