需要css对齐问题的解决方案/支持

Question

我遇到了奇怪的行为与我的网站上的一些div的css对齐。这里是问题的演示：http://jsfiddle.net/PT3jU/1/

您可以在左侧看到“评论”“故事”“订阅”链接，因为我希望它们位于底部（在“关于我的文本”的下面） 。我不明白为什么它的行为如此。任何人都可以提出任何解决方案 问题是与#profContent科（我认为是这样）。

HTML

<div id="profContainer"> 

      <div id="profInfo"> 
      <div id="profImage"> 
      <img src="" alt=""/> 
      </div> 
      <div id="profDetails"> 
       <ul> 
        <li><b class="underb" style="color: #7da315;">Name</b><b style="color: #7da315;">:</b> Name </li> 
        <li><b class="underb" style="color: #1e8bb4;">Country</b><b style="color: #1e8bb4;">:</b> Country </li> 
        <li><b class="underb" style="color: #c86c1f;">Stories</b><b style="color: #c86c1f;">:</b> Stories <a href="#">see all</a></li> 
        <li> 
         <span style="float: left;"> 
          <b class="underb" style="color: #af1e83;">About me</b><b style="color: #af1e83;">:</b> 
         </span> 
         <span style="display:block; overflow:hidden; padding: 0 0 0 5px;"> About me text... 
         </span> 
        </li> 
       </ul> 
      </div> 
      </div> 
     </div> 
     <div id="profContent"> 
      <ul> 
       <li style="margin: 0;"><a href="#">Comments</a></li> 
       <li><a href="#">Stories</a></li> 
       <li><a href="#">Subscribtions</a></li> 
      </ul> 
     </div> 

CSS

#profContainer { 
    width: 520px; 
} 



#profInfo { 
    width: 512px; 
    margin: 10px 4px 0 3px; 
} 

#profImage { 
    -webkit-border-radius: 3px; 
    -moz-border-radius: 3px; 
    border-radius: 3px; 

    height: 100px; 
    width: 100px; 
    padding: 1px; 
    float: left; 
    background: #535353; 
    border: 1px solid #272727; 

    -khtml--webkit-box-shadow: 0 1px 2px #d6d6d6; 
    -moz-box-shadow: 0 1px 2px #d6d6d6; 
    box-shadow: 0 1px 2px #d6d6d6; 
} 

#profDetails { 
    float: right; 
    width: 395px; 
    line-height: 22px; 
} 

#profDetails ul { 
    list-style: none; 
    font-size: 13px; 
} 

#profDetails a { 
    color: #a1a1a1; 
    padding: 0 3px 1px 3px; 

    -webkit-border-radius: 3px; 
    -moz-border-radius: 3px; 
    border-radius: 3px; 

    -webkit-transition: 0.15s; 
    -moz-transition: 0.15s; 
    -o-transition: 0.15s; 
    -ms-transition: 0.15s; 
    transition: 0.15s; 
} 

#profDetails a:hover { 

    color: #ffffff; 
    background: #E89F61; 
} 

.underb { 
    text-decoration: underline; 
} 

#profImage img { 
    -webkit-border-radius: 3px; 
    -moz-border-radius: 3px; 
    border-radius: 3px; 
} 

#profContent { 
    width: 520px; 
    background: #000; 
} 

#profContent ul { 
    list-style-type: none; 
} 

#profContent li { 
    float: left; 
    margin: 0 0 0 10px; 
} 

Answer 1

由于#profDetails是浮动的权利，你看到的是正确的行为，但如果你想#profContent将低于#profDetails，要应用到clear:right#profContent：

• http://jsfiddle.net/PT3jU/2/

Answer 2

加入overflow:hidden既#profContainer和#profContent似乎解决了问题。

Answer 3

#profContent { 
    width: 520px; 
    background: #000; 
    bottom: 0; 
    position: absolute; 
} 

或

#profContent { 
    width: 520px; 
    background: #000; 
    clear: both; 
} 

Answer 4

要么设置#profDetails到float: left;或添加clear: both;到#profContent

假设你真正需要profdetails浮动权，然后clear是你应该如何推动元素过去浮动物体

http://jsfiddle.net/PT3jU/4/

Answer 5

将左边的浮动值加到#profContainer和#profContent。

#profContent { 
    background: none repeat scroll 0 0 #000000; 
    float: left; 
    width: 520px; 
} 
#profContainer { 
    float: left; 
    width: 520px; 
} 

Answer 6

添加clear: both至#profContent

#profContent { 
    clear: both; 
    width: 520px; 
    background: #000; 
} 

的工作版本演示：

http://jsfiddle.net/rogal111/sfGZq/1/

Answer 7

Here的一个例子。

只要把profContent的profDetails ul像这里面：

<li><ul> <!-- outer li is a list item of the big ul --> 
    <li style="margin: 0;"><a href="#">Comments</a></li> 
    <li><a href="#">Stories</a></li> 
    <li><a href="#">Subscribtions</a></li> 
</ul></li> 

而且你的CSS：

#profDetails ul { 
    list-style: none; 
} 

#profDetails li ul li { 
    float: left; 
    margin: 0 0 0 10px; 
}