CSS两个div相邻

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

当前回答

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

2011-02-19 05:47:36

其他回答

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

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

2009-01-15 08:52:46

您可以使用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 >

2009-01-15 09:01:04

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

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

2009-01-15 09:03:12

@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项没有。对不起，那你自己试试吧。

2009-01-15 09:05:08

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

2011-09-30 07:02:40

CSS两个div相邻

推荐文章

最新文章

标签