div里面的div - 宽度问题答案

【问题标题】：div inside div - width problemdiv里面的div - 宽度问题
【发布时间】：2011-01-03 14:57:43
【问题描述】：

我在另一个 div 中有一个 div，如下所示：

<div class="navigation"> <!-- this div must be a single row -->

   <div class="navigationButtons">
   </div>

   <div class="feedback">
 <div id="screenInfo" class="screenInfo">
  PAGE_NUMBER_CANNOT_BE_LESS_THAN_ONE  
 </div>
   </div>

   <div class="pagination">
   </div>

</div>

css 类

div.navigation { height: 25px; }  
div.navigation div.navigationButtons { width: 13%; float: left; }
div.navigation div.feedback{ margin-left: 15%; margin-right: 12em; overflow: hidden; }
div.navigation div.paging { float: right; margin-right: 0.5em; width: 11em; }
div.screenInfo { border-bottom:1px solid #FFDBBD; border-top:1px solid #FFDBBD; margin:0em 0em 1em; width:71.8em; }

此处“screeninfo”的宽度为 71.8em，但我希望“反馈”填充边距之间的可用宽度（可能小于 71.8）。
但即使将溢出设置为隐藏，我也无法在一行中获得“导航”div。

提前致谢。

【问题讨论】：

标签： css layout html

【解决方案1】：

overflow:hidden 创建一个新的格式化上下文，这意味着您的 div 将适合浮动元素。

因此您可以删除div.feedback 的边距。

【讨论】：

我从 div.feedback 中删除了边距，但 div.feedback 元素的宽度仍然超出了可用空间，并且我没有将整个 div 放在一行中。