CSS两个div相邻

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

当前回答

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

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

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

2011-11-03 10:02:45

其他回答

我遇到了同样的问题，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;
}

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

2011-08-21 21:09:58

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

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

2009-01-15 08:52:46

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

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

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

2011-11-03 10:02:45

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

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

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

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

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

2015-08-13 14:55:43

CSS两个div相邻

推荐文章

最新文章

标签