html - 两个div拒绝在同一行

Question

我有一个包含图像的 HTML 文件，在该图像下方我想在同一行上显示两个 div，如下所示:

text1                       text2

但无论我怎么尝试，结果都是这样的:

text1
text2

这很烦人。

 <div id="footer">  
                {% block footer %}      
                    <div class="footercontent">                 
                        <div class="left">&copy; blahblahblah </div>

                        <div class="right">
                            <a target="_blank" href="http://privacy.aol.com/">Privacy</a>
                            |   
                            <a target="_blank" href="http://legal.aol.com/TOS">Terms of Use</a>
                        </div>  
                    </div>              
                 {% endblock %}
            </div>

我希望两个内部 div 位于同一条线上，并在所有现代浏览器上都以这种方式显示。为此，我设置了一个 css 文件:

#footer                 { margin:auto;   width:720px; }
#footer a               {   color:#333;         }   
#footer a:visited       {   color:#333;         }
#footer .left           {   float:left;         }   
#footer .right          {   float:right; }

我在这里遗漏了什么明显的东西吗？我虽然 float 是为了解决这个问题。

编辑:它似乎在 Chrome 中正确显示

Answer 1

您发布的代码实际上如下所示工作。

如果您使用 float: right，第二个子 block 的右边缘将与包含 block 的右侧对齐。

如果您希望第二个 block 向左，请使用 float: left，如第二个示例所示，如果您需要控制两个元素之间的间距，请添加左边距。

如果仍然有问题，可能是其他一些 CSS 规则导致了冲突。

.footer {
  margin: auto;
  width: 400px; /* for demo only, exact value not relevant */
  border: 1px dotted blue;
  overflow: auto;
}
.footer a {
  color: #333;
}
.footer a:visited {
  color: #333;
}
.footer .left {
  float: left;
  border: 1px dotted gray;
}
.footer .right {
  float: right;
  border: 1px dotted gray;
}
.left.space {
  margin-left:30px;
}

<h2>First layout...</h2>
<div class="footer">
  <div class="footercontent">
    <div class="left">&copy; blahblahblah</div>

    <div class="right">
      <a target="_blank" href="http://privacy.aol.com/">Privacy</a>
      |
      <a target="_blank" href="http://legal.aol.com/TOS">Terms of Use</a>
    </div>
  </div>
</div>
<h2>Second layout...</h2>
 <div class="footer">
  <div class="footercontent">
    <div class="left">&copy; blahblahblah</div>

    <div class="left space">
      <a target="_blank" href="http://privacy.aol.com/">Privacy</a>
      |
      <a target="_blank" href="http://legal.aol.com/TOS">Terms of Use</a>
    </div>
  </div>
</div>