Question

在下面的代码中，父div的宽度将动态变化。左右分隔具有固定宽度。我需要中间分区填充父分区中的剩余空间。这样我觉得中间分区的宽度应该根据它的父div来动态变化。

<body>
   <div id='parent' style='width:100%'>
      <div id='leftDiv' style='width:30px;float:left;'>left division</div>
      <div id='middleDiv' ***style='width:??;'***>middle division</div>
      <div id='rightDiv' style='width:30px;float:right;'>right division</div>
   </div>
</body>

请注意，我想用CSS而不是js来做这个。

Answer 1

像这样使用

width: calc(100% - 60px);

left div 30px right div 30px = 60px 中间div宽度= 100％ - 60px

Answer 2

midDiv不需要宽度，只需将float:right; div添加到第一个。

<强> Fiddle Demo

以下是解决方案：

<div id='parent' style='width:100%'>
      <div id='rightDiv' style='width:100px;float:right;background-color:red;'>right division</div>
      <div id='leftDiv' style='width:100px;float:left;background-color:green;'>left division</div>
      <div id='middleDiv' style='background-color:yellow;'>middle division</div>      
   </div>

Answer 3

看起来像Media object

的好候选人

.parent,
.middleDiv {
   overflow:hidden;
   _overflow:visible;
   zoom:1;
}

.leftDiv {
   float: left;
   width: 30px;
}

.rightDiv {
   float: right;
   width: 30px;
}

使分部使用其父级中的所有可用大小

3 个答案: