Question

我想我理解基本左派和左派右浮动，但我无法弄清楚这个特殊的三栏布局。我甚至不确定我想要什么是可能的。我想创建一个包含三个＆lt; div＆gt;的行。列如下：

最右边的＆lt; div＆gt;接触容器的右边缘，包含nowrap文本，并且根据需要尽可能宽。
中心＆lt; div＆gt;就在最右边的左边＆lt; div＆gt;，包含＆lt; img＆gt;，并且根据需要尽可能宽。
最左边的＆lt; div＆gt;接触容器的左边缘，包含单词包装的文本，并使用最小宽度20％但是动态拉伸以使用可用的剩余宽度在容器中。
如果（并且仅当）的总和，则应出现水平滚动条三列的宽度大于宽度容器。我不希望任何这些＆lt; div＆gt; s向下移动到下一行。

我遇到＃3＆amp; amp; ＃4。这可能吗？我猜我需要最左边的列实际上是两个＆lt; div＆gt; s（一个直接在另一个上面），一个空＆lt; div＆gt;在其他包装文本上方/下方的宽度为20％＆lt; div＆gt;具有未指定的宽度，但我无法弄清楚如何做到这一点。

谢谢，
Tom.III

Answer 1

        <style>
            #main{
                position: fixed;
                top: 0; 
                left: 0;
                width: 100%;
                height: 100%;
            }
            #left{
                float: left;
                max-width: 32%;
                width: auto;
                margin-right: 3px;
                background-color: red;
            }
            #center{
                float: left;
                max-width: 32%;
                width: auto;
                margin-right: 3px;
                margin-left: 3px;
                background-color: green;
            }
            #right{
                float: right;
                max-width: 32%;
                width: auto;
                min-width: 20%;
                background-color: blue;
            }
        </style>
        <div id="main">
            This is the main div!
                <div id="left">
                    Hello From The Left!
                </div>
                <div id="center">
                    Hello From The Center!
                </div>
                <div id="right">
                    Hello From The Center!
                </div>
        </div>

如何从右到左浮动三个div？

1 个答案: