CSS两个div相邻

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

636341 次浏览
小开

不幸的是，对于一般情况，这不是一个简单的问题。最简单的方法是添加一个css风格的属性“float: right;”到你的200px div，然而，这也会导致你的“main”-div实际上是全宽的，其中的任何文本都会漂浮在200px-div的边缘，这通常看起来很奇怪，这取决于内容(几乎在所有情况下，除非它是一个浮动图像)。

< b >编辑: 正如Dom所建议的，包装问题当然可以用边缘来解决。愚蠢的我。< / p >

小开
最佳答案

你可以使用< a href = " https://devdocs。io / css / css_flexible_box_layout noreferrer“rel = > flexbox < / >来布局你的项目:

#parent {
display: flex;
}
#narrow {
width: 200px;
background: lightblue;
/* Just so it's visible */
}
#wide {
flex: 1;
/* Grow to rest of container */
background: lightgreen;
/* Just so it's visible */
}
<div id="parent">
<div id="wide">Wide (rest of width)</div>
<div id="narrow">Narrow (200px)</div>
</div>

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

对于旧的浏览器支持，您可以使用CSS 浮动和宽度属性来解决它。

#narrow {
float: right;
width: 200px;
background: lightblue;
}
#wide {
float: left;
width: calc(100% - 200px);
background: lightgreen;
}
<div id="parent">
<div id="wide">Wide (rest of width)</div>
<div id="narrow">Narrow (200px)</div>
</div>

小开

我的一个网站做了类似的事情:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style TYPE="text/css"><!--


.section {
_float: right;
margin-right: 210px;
_margin-right: 10px;
_width: expression( (document.body.clientWidth - 250) + "px");
}


.navbar {
margin: 10px 0;
float: right;
width: 200px;
padding: 9pt 0;
}


--></style>
</head>
<body>
<div class="navbar">
This will take up the right hand side
</div>
<div class="section">
This will fill go to the left of the "navbar" div
</div>
</body>
</html>
小开

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

证明:

左 正确的

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

小开

正如每个人都指出的那样，你将通过在RHS内容上设置float:right;并在LHS上设置负边距来做到这一点。

然而. .如果你没有在LHS上使用float: left;(就像Mohit所做的那样)，那么你会得到一个步进效果，因为LHS div仍然会在布局中消耗空白空间。

然而. .LHS浮动将收缩内容，所以如果这是不可接受的，你将需要插入一个定义宽度的子节点，在这一点上，你也可以在父节点上定义宽度。

然而. .正如David指出的那样，你可以改变标记的读取顺序来避免LHS浮点要求，但这有可读性和可能的可访问性问题。

然而. .这个问题可以是带有浮动的解决了，并给出一些额外的标记

(警告:我不赞成在那个例子中使用.clearing div，详见here)

综合考虑，我想我们大多数人都希望有一个非贪婪宽度:留在CSS3中……

小开 
div1 {
float: right;
}
div2 {
float: left;
}

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

小开

我不知道这是否是当前的问题，但我刚刚遇到了同样的问题，并使用CSS display: inline-block;标签。 将它们包装在div中，以便它们可以适当地放置。< / p > 

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

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

小开

只要使用z指数，一切都会很好。确保将位置标记为固定或绝对。然后没有东西会像浮动标签一样移动。

小开

我遇到了同样的问题，Mohits版本的工作。如果你想在html中保持你的左右顺序，试试这个。在我的例子中，左边的div正在调整大小，右边的div保持宽度260px。

超文本标记语言

<div class="box">
<div class="left">Hello</div>
<div class="right">World</div>
</div>

CSS

.box {
height: 200px;
padding-right: 260px;
}


.box .left {
float: left;
height: 200px;
width: 100%;
}


.box .right {
height: 200px;
width: 260px;
margin-right: -260px;
}

诀窍是在主框上使用右填充，但通过再次使用右边距放置右框来再次使用该空间。

小开

这不是每个人的答案，因为它在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;
}
小开

我今天遇到了这个问题。基于以上的解决方案，这对我来说是有效的:

<div style="width:100%;">
<div style="float:left;">Content left div</div>
<div style="float:right;">Content right div</div>
</div>

简单地让父div跨越全宽度和浮动div包含在其中。

小开

更新

如果需要在一行中放置元素，可以使用Flex布局。这里你有另一个Flex教程。它是一个很棒的CSS工具，尽管它不是100%兼容，但它的支持每天都在变得更好。这很简单:

超文本标记语言

<div class="container">
<div class="contentA"></div>
<div class="contentB"></div>
</div>

CSS

.container {
display: flex;
width: 100%;
height: 200px;
}


.contentA {
flex: 1;
}


.contentB {
flex: 3;
}

你得到的是一个总大小为4个单元的容器，它与其子单元以1/4和3/4的关系共享空间。

我已经在CodePen中做了一个例子来解决你的问题。我希望这能有所帮助。

< a href = " http://codepen.io/timbergus/pen/aOoQLR?编辑= 110 noreferrer“rel = > http://codepen.io/timbergus/pen/aOoQLR?编辑= 110 < / >

非常古老的

也许这只是无稽之谈，但你试过用桌子吗?它不直接使用CSS来定位div，但它工作得很好。

你可以创建一个1x2表，把你的divs放在里面，然后用CSS格式化这个表，把它们放在你想要的地方:

<table>
<tr>
<td>
<div></div>
</td>
<td>
<div></div>
</td>
</tr>
</table>

请注意

如果你想避免使用表，如前所述，你可以使用float: left;和__abc1，在下面的元素中，不要忘记添加clear: left;， clear: right;或clear: both;，以便清理位置。

小开

我混合使用float和overflow-x:hidden。最少的代码，总是有效的。

https://jsfiddle.net/9934sc4d/4/ +你不需要清除你的浮动!

.left-half{
width:200px;
float:left;
}
.right-half{
overflow-x:hidden;
}

提交答案