2024-09-29 08:00:02

CSS两个div相邻

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


当前回答

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

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

其他回答

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

<!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>
div1 {
    float: right;
} 
div2 {
    float: left;
}

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

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

更新

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

HTML

<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中做了一个例子来解决你的问题。我希望这能有所帮助。

http://codepen.io/timbergus/pen/aOoQLR?editors=110

非常古老的

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

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

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

Note

如果你想避免使用表,如前所述,你可以使用float: left;和float: right;在下面的元素中,不要忘记添加一个clear: left;, clear: right;或明确:两者;为了清洁这个位置。

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

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