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

2 列 Div 布局：实现固定宽度的右列和流动的左列

挑战：

创建两列布局，其中右列具有固定宽度，而左列动态调整以适应可用宽度

提供的代码：

提供的代码尝试使用浮动和边距实现布局，但遇到问题。

解决方案:

要建立固定宽度的右列，同时保持左列的流动性，请遵循以下步骤指南：

1. 删除左列上的浮动：从左列（#content）中删除浮动属性。
2. 重新排序 HTML 列： 在 HTML 代码中将右列 (#right) 放置在左列之前。这可确保首先应用右列的宽度。
3. 将溢出应用到外部 Div： 将溢出：隐藏和高度（例如 height：auto）添加到外部 div (div.容器）。这可以防止内部 div 溢出容器。
4. 设置左列宽度和溢出：将左列宽度设置为 auto 并添加溢出：隐藏。这允许该列填充剩余空间并防止与右侧列交互。

示例代码：

HTML：

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

CSS：

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

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

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

演示：

访问[此JsFiddle](https://jsfiddle.net/jackJoe/fxWg7/) 进行工作演示。

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