2024-09-29 08:00:02

CSS两个div相邻

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


当前回答

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

其他回答

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

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

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

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

正如大家所指出的,你可以通过设置float:right;RHS含量为负,LHS为负。

然而. .如果你不使用浮点数:left;在LHS上(如Mohit所做的那样),那么你会得到一个步进效果,因为LHS div仍然会在布局中消耗边缘空间。

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

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

然而. .这个问题可以用浮动来解决,并提供一些额外的标记

(警告:我不赞成在那个例子中使用.clearing div,详情请看这里)

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

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

HTML

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

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