html - 两个 float 的 div，一左一右。我如何强制他们留在一条线上？

Question

好的，这是我的问题:我有一个带有 Logo 的 Div 向左浮动，一个带有菜单的 div 向右浮动。当他们触摸时，菜单会掉到新的一行，我希望他们被迫留在一行上，而 Logo 会变小。

|                                                                  |
|    +---------------+                                             |
|<---|      logo     |--->                                         |
|    | variable width|  +----------------------------------------+ |
|    |   float left  |  |                Menu                    | |
|    |               |  |    fixed width based on content        | |<----->
|    |               |  |             float right                | |
|    |               |  +----------------------------------------+ |
|    +---------------+                                             |
|                                                                  |

布局基本上是:

<div class="Container">
    <div class="Logo">
        <a>
            <img></img>
        </a>
    </div>
    <div class="MenuContainer">
        <div class="MenuInnards"></div>
    </div>
</div>

感谢您的帮助!

Answer 1

可以使用“display:table”来解决问题。通过使用此代码，您还可以将内容垂直居中(如您在方案中所示)。

HTML

<div class="Container">
    <div class="Logo">
        <a>
            <img></img>
        </a>
    </div>
    <div class="MenuContainer">
        <div class="MenuInnards"></div>
    </div>
</div>

CSS

.Container{max-width: 800px; width: 100%; display:table;}
.Logo{display:table-cell; vertical-align:middle}
.Logo a img{width: 100%; max-width: 200px}
.MenuContainer{vertical-align:middle; display:table-cell; width:400px;}
.MenuInnards{float:right;}