HTML

Question

我有两个div元素。一个位于最左侧，另一个位于右侧（相同的水平位置）是否有可能创建一个thrid div，它占据第一个和第二个之间的整个空间而不会重叠到它们中？

这是我的两个div容器：

<div style="float:left; width:100px; height:100px; background-color:black"></div>
<div style="float:right; width:100px; height:100px; background-color:red"></div>

http://jsfiddle.net/tfYS5/

Answer 1

这样的事情怎么样？通过创建一个包含左侧和右侧浮动div的包含div来实现效果。然后第三个div将包含所需的任何内容而不会溢出到下一个内容

http://jsfiddle.net/tfYS5/5/

HTML

<div class="container">
    <div class="leftDiv"></div>
    <div class="content">Testing 123</div>
    <div class="rightDiv"></div>
</div>

CSS

.container{
    position:relative; 
    width: 100%; 
    height:100px; 
    background-color:blue;
    overflow: hidden;    
}

.leftDiv{
    position: absolute; 
    left: 0px;
    width:100px;
    height:100%; 
    background-color:black;
}

.content{
    position: absolute;
    height: 100%;
    color: white;
    //the margin here should be the same as the width of the leftDiv & rightDiv   
    margin: 0px 100px;
}

.rightDiv{
    position: absolute; 
    right: 0px;
    width:100px; 
    height:100%; 
    background-color:red;
}

Answer 2

是，

你应该使用widht作为百分比。以此为例;

<div id="1" style="width:30% "></div>
<div id="2" style="width:40% "></div>
<div id="3" style="width:30% "></div>

这应该有所帮助，它也可以通过这种方式适应屏幕宽度。

确定然后尝试使用margin：auto而不是设置宽度。或者更聪明。你可以设置正确的位置吗？左：100px，右：100px，因为它们是固定的。

Answer 3

如果您不反对在父div中嵌套两个div，这可能是一个解决方案：

JSFiddle

HTML：

<div class="remaining">
  <div style="float:left; width:100px; height:100px; background-color:black"></div>  
  <div style="float:right; width:100px; height:100px; background-color:red"></div>
</div>

CSS：

.remaining{width:100%;height:100px;background-color:green;}

Answer 4

以代码为基础：

 <div style="float:left; width:100px; height:100px; background-color:black"></div>
    <div style="float:right; width:100px; height:100px; background-color:red"></div>
    <div style="width:auto; height:100px; background-color:blue"></div>
    <div style="clear: both;"></div>

Answer 5

添加 <div style="width:100%; height:100px; background-color:blue;"></div> 在您现有的代码下。

创建一个占用两个其他空间的div

5 个答案:

HTML

CSS