如何创建具有固定宽度右列和流动左列的 2 列布局？

2 列 Div 布局：右列固定宽度，左列流动

问题：

您正在寻求一种解决方案来创建具有固定宽度右列的两列布局，并且灵活的左栏。尽管探索了各种建议的方法，但没有一个能够满足您的特定需求。

答案：

要实现您想要的布局，需要进行以下修改：

1. 从左列中删除浮动：从左列中删除浮动属性。它的宽度将自动确定。
2. 反转 HTML 中的列顺序： 在 HTML 代码中，确保右列位于左列之前。这允许固定宽度的右列在流体左列调整之前确定其宽度。
3. 将溢出和高度添加到外部 Div：应用溢出：隐藏属性和特定高度或外部 div 的自动高度。这可确保它封装两个内部 div。
4. 配置左列 CSS： 对于左列，添加 width: auto 和 Overflow: hide。这些属性使左列独立于固定宽度的右列。

示例 HTML 和 CSS：

<div class="container">
  <div class="right">
    Right content fixed width
  </div>
  <div class="left">
    Left content flexible width
  </div>
</div>

.container {
  height: auto;
  overflow: hidden;
}

.right {
  width: 180px;
  float: right;
  background: #aafed6;
}

.left {
  float: none;
  background: #e8f6fe;
  width: auto;
  overflow: hidden;
}

通过实现这些调整后，您可以创建所需的两列布局，其中具有固定宽度的右列和流动的左列。

以上是如何创建具有固定宽度右列和流动左列的 2 列布局？的详细内容。更多信息请关注PHP中文网其他相关文章！