在固定容器内具有固定左列和 flex 右手列的 CSS3 布局答案

【问题标题】：CSS3 layout with fixed left column and flex right hand column within a fixed container在固定容器内具有固定左列和 flex 右手列的 CSS3 布局
【发布时间】：2014-07-14 14:46:59
【问题描述】：

只是想知道这对于 css 是否可行，我试图有一个布局，其中左侧列具有固定宽度，右侧具有固定宽度的包含范围内的 flex 宽度。

这是图片的附件

感谢您的任何建议。

【问题讨论】：

你在寻找类似this的东西吗？
@Harry 谢谢不是真的右手边会很流畅

标签： css

【解决方案1】：

检查this是否可以帮助您

HTML

<div class="outer">
    <div class="left">Test</div>
  <div class="right">Test</div>
</div>

CSS

*{margin: 0}
.outer {
  max-width: 1444px;
}
.left {
  float: left;
  width: 200px;
  height: 600px;
  background: red
}
.right {
  margin-left: 200px;
  background: yellow;
  height: 600px;
}

【讨论】：

感谢它在您的演示链接下工作，所以基本上只是宽度自动？
您需要将 float: left 和 width: 200px 赋予左侧边栏，margin-left: 200px 赋予右侧内容。
感谢 Tushar 看看 harry 示例，他没有 margin-left: 200px，但看起来仍然有效。
是的，你是对的，harry 没有给出 margin-left，因为它的 .flexible 从 .fixed-left 开始的同一点开始。需要留边距才能将 .flexible 移动到 .fixed-left 结束的位置。

【解决方案2】：

你肯定可以用一张桌子来做。不确定是否有人有更好/替代方法。

<html>
<head>
<style>
.container { width:400px; }
.left { width:100px; background-color:red;}
.right { width:100%; background-color:yellow;}
</style>
</head>
<body>
<table class="container">
<tr>
<td class="left">left section</td>
<td class="right">right section</td>
</tr>
</table>
</body>
</html>

【讨论】：

谢谢 ben hmmm... 表格很难处理响应式设计，如果可以的话，我会尽量避免。无论如何，感谢您为解决方案之一标记您。

【解决方案3】：

您可以使用以下代码来实现它。基本上，我们以固定宽度浮动左侧 div，让右侧 div 占据其余部分。

HTML：

<div class='container'>
    <div class='fixed-left'>abcd</div>
    <div class='flexible'>12345</div>
</div>

CSS：

.container{
    border: 1px solid black;
    max-width: 440px;
}
.fixed-left{
    float: left;
    width: 200px;
    border: 1px solid blue;
}
.flexible{
    border: 1px solid red;
    width: 100%;
}

Demo|Demo without Margin

【讨论】：

谢谢哈利，抱歉我的英文可能不太清楚... :)
有趣的是他实际上有一个margin-left: 200px; （在右侧列）这很聪明......我不确定我是否应该包括左边距，因为没有它仍然有效（这是你的例子）
这取决于您希望布局如何在非常低的分辨率（小于或等于 200 像素）上工作。使用边距，右侧内容将始终在前面留下 200px 的空间，而没有它，右侧将简单地环绕到下一行并从左边缘开始。你可以在this sample看到。
谢谢哈利，我希望我能打两下……因为两者都是很棒的答案。
@bluebill1049：没关系，伙计。 SO非常清楚地表示，接受的选择是你的。你应该接受你喜欢的答案:)

【解决方案4】：

你可以使用浮点数： HTML：

<div class="left-div">This is left DIV with lots of text text text text<br />and even more text</div>
<div class="right-div">
    <div class="upper">This is upper right DIV</div>
    <div class="lower">This is lower right DIV</div>
</div>

CSS：

.left-div {
    width: 200px;
    float: left;
}

.right-div {
    float: right;
}

.upper {
    max-width: 100%;
}

.lower {
    max-width: 1444px;
}

小提琴：http://jsfiddle.net/68u8N/

【讨论】：

谢谢，但它需要包装容器。可能我的图不够清晰