css 2 左列仅按图像宽度固定，右列占据容器宽度的其余部分答案

【问题标题】：css 2 column left fixed-only-by-image-width, right col to take up rest of container widthcss 2 左列仅按图像宽度固定，右列占据容器宽度的其余部分
【发布时间】：2014-04-23 05:49:18
【问题描述】：

我认为我的标题说明了一切。

我需要一个两列 css div 结构。左边栏，我要放一张图片。图像将具有可变宽度，我希望右列占据容器的其余部分。我有这个，它并没有真正起作用，因为右列只占用所需的空间。我希望正确的 col 占据包含图像的 div 的整个右侧。

非常感谢您的帮助。

    <style>
.container {
   height: auto;
   overflow: hidden;
}

.right {
    width: auto;
    float: right;
    background: #aafed6;
}

.left {
    float: none; /* not needed, just for clarification */
    background: #e8f6fe;
    /* the next props are meant to keep this block independent from the other floated one */
    width: auto;
    overflow: hidden;
}

    </style>


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

尊重

【问题讨论】：

标签： html css

【解决方案1】：

你的基础是好的技术，除了 .left 应该是 floatting 并且是流程中的第一个。

DEMO

其他技术，如果您不想在 HTML 中切换 div 位置，将是

display:table + direction DEMO

或

display:flex; + order DEMO

【讨论】：