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

我错过了一些明显的东西吗？我虽然浮动是为了解决这个问题。

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

Answer 1

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

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

如果您希望第二个块朝左，请使用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>

Answer 2

我认为您需要设置锚标记的显示属性，如

#footer a {
color:#333; 
display:inline-block
}

两个div拒绝在同一条线上

2 个答案: