Question

我认为我的头衔就是这么说的。

我需要一个双列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>

尊重

Answer 1

你的基础是一种很好的技巧，除了.left应该是float ting并且是流程中的第一个。

<强> DEMO

其他技巧，如果您不想在HTML 中切换div位置，则

display:table + direction DEMO

或

display:flex; + order DEMO

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

1 个答案: