css - 无法对齐 css 元素

Question

我正在尝试使用 CSS 编写网站代码。我的标题如下所示。它由两个子 div 组成 - logo 和 topright。每当我最小化屏幕的宽度时，topright 就会向下分流到下一行。两个 div 分别向左和向右浮动，并且应该共享同一行。但是，我不想将 topright 分流到下一行。我该如何解决这个问题？

<div id="header">
<div id="logo">
  <h1><a href="index.html">Logo</a></h1>
</div>
<div id="topright">
<div id="phone">
  <p>here</p>
  <h6><a href="#">Learn about out services</a></h6> </div>
<div id="ssl">  

     <img src="images/ssl.png" width="150" height="39" align="right" />

    </div>

</div>

我的CSS代码是

#header {
    width: 100%;
    position:relative;
    clear:both;
    }
#logo {
    float: left;
    margin-top: 20px;
    display: block;

    }   

#logo h1 {
    text-indent: -2000px;
    background:url(images/logo.png) no-repeat;
    display:block;

    }
#logo h1 a {
    display:block;
    width: 381px;
    height: 97px;
    }
#topright {
    float: right;
    margin-top: 20px;
display: block;
}
#phone {
    float: left;
    background:url(images/phone.png) no-repeat right;
    height: 70px;
    padding-top: 40px;
    padding-right: 60px;
    text-align:right;

    }
#phone p {
    font-weight:bold;
    font-size: 1.4em;
}
#phone h6 {
    font-weight:bold;
    font-size: 0.8em;
    color:#6F694F;
    }
#ssl {
    float: right;
    margin-top: 40px;
    margin-left: 20px;
    }

Answer 1

将 min-width: 1000px 放入 logo 的 css 中。这确保始终有 1000 像素，无论是如何隐藏，topright div 都可以容纳在里面，即使它不在屏幕上也是如此。