Question

我正试图在它看起来像这样的效果：

C---------------------------------------)
| Address 1 | Phone Numbers             |
| Address 2 | Times place is open       |
(---------------------------------------)

但是与下面的间距使它成为

(-------------------------------------------)
| Address 1           | Phone Numbers       |
| Address 2           | Times place is open |
(-------------------------------------------)

我该怎么做才能解决这个问题？以下是相关的CSS和HTML。

<footer> 
  <style>
    footer {
      margin-left: 224px;
      margin-top: 1em;
      margin-bottom: 1em;
      clear: both;
      font-size: 0.66em;
    }

    #contactInfo{
      background: #FDF9D3;
      border: 1px solid black;
      -moz-border-radius: 5px;
      border-radius: 5px;

      -moz-column-count: 2;
      -moz-column-rule: 1px solid black;
    }
  </style>
  <div id="contactInfo">
    <span class="address">Address 1</span><br>
    <span class="address">Address 2</span><br>
    <span class="phone">Office: ###-###-####, Fax: ###-###-####</span><br>
    <span id="hours">Open Monday through Friday from 9:00am to 5:30pm</span>
  </div>
  <div id="copyright">Copyright &copy; Business Name goes here, 2010; All rights reserved</div>
</footer>

Answer 1

#contactInfo{
  background: #FDF9D3;
  border: 1px solid black;
  -moz-border-radius: 5px;
  border-radius: 5px;

  -moz-column-count: 2;
  -moz-column-rule: 1px solid black;
  -moz-column-width: 200px;
  -moz-column-gap: 20px;
}
span.address{ float:right;)

Answer 2

为什么不在包装上使用一些右边填充？
您需要设置宽度（2x宽度列+填充=所需的总宽度）请记住，如果您要定位适用于css3的浏览器，也可以使用大小调整来更改框模型。

删除CSS3列之间的间距

2 个答案: