html - 两个浮动 div，一个右一个左。我如何强迫他们留在一条线上？

Question

好吧，这是我的问题：我有一个带有徽标的 div 向左浮动，一个带有菜单的 div 向右浮动。当他们触摸时，菜单会下降到新的一行，我希望他们被迫停留在一行，而徽标会变小。

|                                                                  |
|    +---------------+                                             |
|<---|      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;}

Answer 2

尝试这个

HTML

<div id="holder">
   <div id="left">
      <a><img/></a>
   </div>
   <div id="right"></div>
</div>

CSS

#holder {
    width: 960px;
    height: 300px;
    background-color: green;
    margin-left: auto;
    margin-right: auto;
}

#left {
    width: 248px;
    height: 130px;
    background-color: yellow;
    float: left;
    margin-top: 50px;
    margin-left: 20px;
    margin-right: 20px;
}

#right {
    width: 640px;
    height: 70px;
    background-color: red;
    float: right;
    margin-top: 70px;
    margin-left: 10px;
    margin-right: 20px;
}