动态设置另一个内部div的宽度后，如何使内部div填充剩余的水平空间？

设置内部 Div 的宽度

使用嵌套 div 和灵活内容时，确定每个 div 的适当宽度可能具有挑战性。本问题探讨了一种在考虑另一个内部 div 的宽度后将内部 div 的宽度设置为剩余水平空间的技术。

HTML 结构：

The HTML 结构由一个外部 div 和两个嵌套的内部 div 组成：

<div>

问题陈述：

目标是让#inner2 div 填充剩余的水平方向#inner1 div 的宽度是根据其内容动态确定的。

神秘成分：溢出：隐藏

实现此布局的关键是使用CSS 属性溢出：隐藏；在外部 div (#outer) 上。这指示浏览器将其浮动子项限制在自己的边界内。

修订的 HTML：

要有效应用 CSS，div id 应遵循有效的 CSS 语法：

<div>

CSS 解决方案：

#outer {
  overflow: hidden;
  width: 100%;
  /* Styling for illustration purposes */
  border: solid 3px #666;
  background: #ddd;
}

#inner1 {
  float: left;
  /* Styling for illustration purposes */
  border: solid 3px #c00;
  background: #fdd;
}

#inner2 {
  overflow: hidden;
  /* Styling for illustration purposes */
  border: solid 3px #00c;
  background: #ddf;
}

浏览器兼容性和边缘情况：

此解决方案已经过测试并确认在 IE 6、7 和 8 中可以正常工作；火狐3.5；和 Chrome 4。在 IE 6 中，使用缩放的附加 CSS 规则：1；确保 #inner2 div 填充剩余空间是必要的。

以上是动态设置另一个内部div的宽度后，如何使内部div填充剩余的水平空间？的详细内容。更多信息请关注PHP中文网其他相关文章！