Html 如何在第二个宽度为100%的位置并排放置两个div？_Html_Css

Html 如何在第二个宽度为100%的位置并排放置两个div？

html css

Html 如何在第二个宽度为100%的位置并排放置两个div？,html,css,Html,Css,我想做到这一点： width=60px width = remaining space |------| |-----------------------------------| | div1 | | Loren ipsun... | |------| | | | div2

我想做到这一点：

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

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

只需浮动第一个div，并设置第二个div左侧的边距以适应第一个div的宽度。类似如下：

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

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

请记住，div上的

width

CSS属性仅适用于内容，因此您需要将

左边距

设置为第一个div的

宽度

、

边框

、

边距

和

填充

属性之和

是JSFIDLE的更新版本。如果您对此有任何疑问，请告诉我。

下面是如何完成的：

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

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

这是：

CSS:

继续（目前正在播放）

希望这有帮助

试试这个：

<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> 内容表-模板 div{ 边框：1px实心#000000； } #迪夫利特{ 宽度：60px；浮动：左； } #分权{ 显示：块；左边距：62px； } 这个DIV的宽度为60px。此DIV占据页面的其余部分。。。

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

另一个选项是使用

最近的firefox、chrome和safari都支持这一工作方案

可以使用

将其移植到不受支持的浏览器。有一种新方法可以使用CSS3排列元素点击这里，这是一个游戏，你可以通过编写CSS代码来帮助Froggy和朋友们

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

灵活启动：项目与容器左侧对齐
柔性端：项目与容器右侧对齐
居中：项目在容器的中心对齐
间距：项目以相等间距显示
周围的间距：项目以相等的间距显示

我使用的是

显示：内联块

。我想这是搞砸了。这很有效，谢谢。只要小心这两个div，不要添加填充或边框。如果您必须将容器放入其中。@nux：我试图解决您的问题：“调整第一个div的宽度（包括填充、边距、边框）”@nux：我编辑了我的答案，以使其更清楚。如果您仍然发现它不明确，请告诉我。这很糟糕，您只需要使用float left和float right将两个div并排放置。您需要删除

宽度：100%

从

.content

，否则会使内容阻塞视口的大小，导致所有内容的总宽度大于视口，因此会出现水平滚动条。使用绝对位置时，对于IE7，您应该将其父div的位置设置为相对。绝对位置也很危险，因为我们不知道它将在什么环境下使用。这应该是好的，只要它被放置在页面的顶部或在一个相对定位的块中，但否则它可能会表现出意外的行为。你真的不需要它被绝对定位。它在这里没有多大价值。 <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>