html - 尝试水平放置三个 元素

Question

我试图让 3 列的列表水平排列，右边距。

我几乎明白了，但是我在右对齐#col3 时遇到了一些问题。

我尝试使用 float:right，但不起作用，但使用 float:left，但我猜它不正确，因为当我这样做时 #info #col3 {width:200px; float:left;} 然后给我的 #info 提供 background:color，我的 div 不包含应该包含的内容。因此存在某种冲突。

你知道正确的做法吗？？

这是我的问题:http://jsfiddle.net/tvj4C/

这是我的代码:

html:

<div id="page-content">
  <h1>Title of the post</h1>
  <img src="../image1.jpg" width="700px" height="360px" />
  <div id="info">
    <h2>Info</h2>
    <ul id="col1">
      <li>Adress 1</li>
      <li>Adress 2</li>     
    </ul>
    <ul id="col2">
      <li>Phone 1</li>
      <li>Phone 2</li>   
    </ul>
    <ul id="col3">
      <li>Email 1</li>
      <li>Email 2</li>       
    </ul>
  </div>
  <div id="clear"></div>
  <div id="content">
    <h2>Subtitle of the post</h2>
    <p>Content of the post.</p>
</div>  

CSS:

#page-content
{
    float:left;
    width:700px;
    font-size:16px;
}

#page-content h1
{
    font-size:25px;
    font-weight:100;
    margin-bottom:10px;
}

#page-content ul
{
    list-style:none;
}

#page-content ul li
{
   font-size:17px; margin-top:7px; text-decoration:none;
}

#info
{
    margin:10px auto;
    background:yellow;
}

#page-content h2
{
    font-size:22px; color:#444; font-family:'bariol_boldbold';  font-weight:100;
}

#info #col1
{
    float:left;
    width:200px;
    margin-right:50px;
}

#info #col2
{
    float:left;
    width:200px;
    margin-right:50px;
}

#info #col3
{
    width:200px;
}


#info ul li a
{
    text-decoration:none;
    color:#000;
    margin-left:10px;
}


#content
{
    margin-top:5px;
    background-color:red;
}

#content p
{
    font-size:16px;
    line-height:25px;
    text-align:justify;
}

#clear
{
    clear:both;
}

Answer 1

display: inline-block;

我认为这里不需要更多的评论；)。

http://jsfiddle.net/tvj4C/1/

您还应该阅读 display: table 和 display: table-cell。如果您将使用 display: table，请记住每个表格单元格的 vertical-align 属性。

顺便说一句:问题有点复杂，所以如果这个答案没有切中要点，请更新问题，我会更新答案；)。