1. 首页
  2. 问答
  3. CSS two divs each other

CSS two divs each other

2009-01-15 85 views
193

我想把两个<div>彼此相邻。正确的<div>约为200px;而左边的<div>必须填满屏幕宽度的其余部分？我怎样才能做到这一点？CSS two divs each other

来源

2009-01-15 Martijn

回答

356

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

来源

2009-01-15 09:01:04

+13

这实际上是正确的答案，简明扼要，而且与上面的两个不同，它是完全独立的。 SO的最佳答案应该就像这样，IMO。 +1 – 2010-06-02 10:30:57

+0

注意详细说明为什么左侧需要'浮动：左'？你对我的回答的评论说'lft div是所有左边区域的跨度'，但是'float：left`会导致它紧紧包裹内容。 – falstro 2011-02-14 07:54:39

+5

浮动使布局最终炸毁，我建议不要使用它... – Smar 2011-08-17 09:18:11

27

不幸的是，这对于一般情况来说并不是一件微不足道的事情。最简单的事情就是添加一个css风格的属性“float：right;”到200px div，但是，这也会导致你的“main”-div实际上是全宽，并且其中的任何文本都会围绕200px-div的边缘浮动，这通常看起来很奇怪，取决于内容（非常多在所有情况下，除非是浮动图像）。

编辑： 正如Dom建议的那样，包裹问题当然可以用余量来解决。傻我。

来源

2009-01-15 08:52:46 falstro

+1

'float：left'会更合适，lft div需要跨越所有的左边区域。没有犯罪的意思，只是考虑。 – 2009-01-15 09:03:14

-1

套用我的其中一个网站，做类似的事情：

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

18

通过@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，但渲染后的项目不显示。对不起，你必须自己尝试。

来源

2009-01-15 09:05:08

2

正如大家已经指出的那样，您可以通过设置RHS内容的float:right;和LHS的负边界来实现此目的。

但是..如果你不在LHS上使用float: left;（如Mohit所做的那样），那么你会得到一个阶梯效应，因为LHS div仍然会消耗布局中的边距空间。

但是，LHS float将收缩包装内容，因此如果不可接受，您需要插入定义宽度的子节点，此时您可能已定义了父级的宽度。

但是......正如David指出的那样，您可以更改标记的读取顺序以避免LHS浮动要求，但这具有可读性和可能的​​可访问性问题。

但是..这个问题是可以solved浮筒给出了一些额外的标记

（警告：我不赞成在这个例子中，.clearing股利，见here了解详细信息）

所有的事情考虑，我想我们大多数人希望能有一个非贪婪宽度：留在CSS3 ...

来源

2009-01-15 09:48:12 annakata

6 
div1 { 
    float: right; 
} 
div2 { 
    float: left; 
}

这将工作，只要你设置clear: both OK用于分隔这两个列块的元素。

来源

2009-12-02 22:25:48 ccpizza

128

我不知道这是否仍是当前的问题，但我只是遇到了同样的问题，并使用CSS display: inline-block;标签。 将这些包装在一个div中，以便它们可以被适当定位。

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

请注意，内联样式属性的使用仅用于此示例的简洁性，当然这些示例被用于移动到外部CSS文件。

来源

2010-06-02 06:38:47 russholio

-7

只是使用z-index，一切都会很好。确保将位置标记为固定或绝对。那么没有什么东西会像浮标一样移动。

来源

2011-02-19 05:47:36 Ginger

4

我遇到了同样的问题和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 andreas

1

这不会是所有人的答案，因为它在IE7中不受支持，但您可以使用它，然后为IE7使用备用答案。它是display：table，display：table-row和display：table-cell。请注意，这不是使用表格进行布局，而是使用div设置样式，以便使事情与上面的所有麻烦很好地排列起来。 Mine是一个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 dwaz

11

我今天就遇到了这个问题。基于上述解决方案，这对我有用：

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

5

UPDATE

如果需要放置元素在一排，你可以使用Flex Layout。在这里你有另一个Flex tutorial。这是一个很棒的CSS工具，即使它不是100％兼容的，它的每一天其support都会变得更好。这工作简单：

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的表格，并把你的divs里面，然后格式化表CSS来把他们当成你想：

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

注意

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

来源

2013-06-25 11:23:34 Timbergus

1

我使用float和overflow-x的混合：hidden。最小的代码，始终有效。

https://jsfiddle.net/9934sc4d/4/ - PLUS你不需要清理你的浮点数！

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

来源

2015-08-13 14:55:43

相关问题

 相关问题