2024-09-29 08:00:02

CSS两个div相邻

我想把两个<div>放在一起。右边<div>大约是200px;而左边<div>必须填满剩下的屏幕宽度?我该怎么做呢?


当前回答

@roe和@MohitNanda所建议的方法是有效的,但是如果正确的div被设置为float:right;,那么它必须在HTML源代码中首先出现。这打破了从左到右的读取顺序,如果页面显示时关闭了样式,可能会导致混乱。如果是这样的话,使用包装器div和绝对定位可能会更好:

<div id="wrap" style="position:relative;">
    <div id="left" style="margin-right:201px;border:1px solid red;">left</div>
    <div id="right" style="position:absolute;width:200px;right:0;top:0;border:1px solid blue;">right</div>
</div>

证明:

left right

编辑:嗯,有意思。预览窗口显示了正确格式化的div,但呈现的post项没有。对不起,那你自己试试吧。

其他回答

您可以使用flexbox布局您的项目:

#{母公司 显示:flex; } #{狭窄 宽度:200 px; 背景:lightblue; /*这样就可以看到*/ } #{宽 flex: 1; /*扩展到容器的其余部分*/ 背景:lightgreen; /*这样就可以看到*/ } < div id = "父" > <div id=" width "> width(其余的宽度)</div> <div id="窄">窄(200px)</div> < / div >

这基本上只是flexbox的表面。Flexbox可以做一些非常了不起的事情。


对于老式浏览器的支持,你可以使用CSS float和width属性来解决这个问题。

#{狭窄 浮:正确; 宽度:200 px; 背景:lightblue; } #{宽 浮:左; 宽度:calc(100% - 200px); 背景:lightgreen; } < div id = "父" > <div id=" width "> width(其余的宽度)</div> <div id="窄">窄(200px)</div> < / div >

@roe和@MohitNanda所建议的方法是有效的,但是如果正确的div被设置为float:right;,那么它必须在HTML源代码中首先出现。这打破了从左到右的读取顺序,如果页面显示时关闭了样式,可能会导致混乱。如果是这样的话,使用包装器div和绝对定位可能会更好:

<div id="wrap" style="position:relative;">
    <div id="left" style="margin-right:201px;border:1px solid red;">left</div>
    <div id="right" style="position:absolute;width:200px;right:0;top:0;border:1px solid blue;">right</div>
</div>

证明:

left right

编辑:嗯,有意思。预览窗口显示了正确格式化的div,但呈现的post项没有。对不起,那你自己试试吧。

我不知道这是否是当前的问题,但我刚刚遇到了同样的问题,并使用CSS显示:内联块;标签。 将它们包装在div中,以便它们可以适当地放置。

<div>
    <div style="display: inline-block;">Content1</div>
    <div style="display: inline-block;">Content2</div>
</div>

请注意,inline style属性的使用只是为了简化这个示例,当然这些属性会被移动到外部CSS文件中。

这不是每个人的答案,因为它在IE7-中不受支持,但你可以使用它,然后使用IE7-的替代答案。它是display: table, display: table-row和display: table-cell。注意,这不是使用表格进行布局,而是样式化div,这样就可以很好地排列,省去上面的所有麻烦。我的是一个html5应用程序,所以它工作得很好。

本文展示了一个示例:http://www.sitepoint.com/table-based-layout-is-the-next-big-thing/

下面是你的样式表的样子:

 .container {
    display: table;
    width:100%;
 }

 .left-column {
    display: table-cell;
 }

 .right-column {
    display: table-cell;
    width: 200px;
 }
div1 {
    float: right;
} 
div2 {
    float: left;
}

只要你为分隔这两个列块的元素设置clear:这就可以正常工作。