如何将两个div彼此相邻放置以填充可用空间

我有两个div，右边是80px宽，另一个应该填满剩余空间。到目前为止，我尝试过：如何将两个div彼此相邻放置以填充可用空间

<!DOCTYPE html> 

<html> 
<head> 
    <title>#{get 'title' /}</title> 
    <style type="text/css"> 
     body { 
      margin: 0; 
      padding: 0; 
     } 

     #left { 
      position: relative; 
      margin-right: 80px; 
      background-color: red; 
     } 

     #right { 
      float: right; 
      position: relative; 
      text-align: left; 
      width: 80px; 
      background-color: yellow; 
     } 
    </style> 
</head> 
<body> 
<div id="left"> 
    Left 
</div> 
<div id="right"> 
    Right 
</div> 
</body> 
</html>

但是，右边框总是放在左边框的下方，而不是右边。我想这是因为保证金。我也尝试了一个保证金 - 左边：-80px在右边，但这似乎没有改变任何东西。那么，我该如何改变CSS，让右边的div与左边的div在同一行？

来源

2011-02-09 Jan Thomä

左边前有权div。

<div id="right"> 
    Right 
</div> 
<div id="left"> 
    Left 
</div>

Working Example

来源

2011-02-09 14:23:14

这工作，似乎是最简单的建议的解决方案的。谢谢！我没有得到的是，为什么这是工作。你能解释为什么吗？ – 2011-02-09 14:41:04

由于元素是按顺序绘制的，因此不必向下移过左侧元素以绘制右侧，而是先绘制右侧，然后左侧绘制右侧元素。 – 2011-02-09 14:46:51

这是因为div是块元素，这意味着它总是会破的流动。你可以做的是改变div的display到inline和float到left。

来源

2011-02-09 14:23:26

您可以将#right的position:relative;更改为position:absolute;top:0;right:0;。这会将元素放置在其父元素的右上角。

例子：http://jsfiddle.net/WaQGW/

来源

2011-02-09 14:26:04 Sotiris

或者，如果你正在寻找左格保持在一个静态的宽度和正确的div来扩大和缩小与页面的大小，你会使用下面的代码：

.left { 
    float: left; 
    position: relative; 
    width: 80px; 
    background-color: red; 
} 

.right { 
    position: relative; 
    text-align: left; 
    margin-left: 80px; 
    background-color: yellow; 
}

和HTML会...

<div class="left">Left</div> 
<div class="right">Right</div>

来源

2012-08-13 18:19:52

如今，它可以用做flex。

集容器的（body在这种情况下）display属性flex，左div到100%的然后设置宽度。

body { 
 
    margin: 0; 
 
    padding: 0; 
 
    display: flex; 
 
} 
 

 
#left { 
 
    background-color: red; 
 
    width: 100%; 
 
} 
 

 
#right { 
 
    width: 80px; 
 
    background-color: yellow; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title>#{get 'title' /}</title> 
 
</head> 
 
<body> 
 
<div id="left"> 
 
    Left 
 
</div> 
 
<div id="right"> 
 
    Right 
 
</div> 
 
</body> 
 
</html>

来源

2016-01-12 17:49:33

如何将两个div彼此相邻放置以填充可用空间

回答

相关问题