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

Question

我的网站上某些 div 的 css 对齐出现奇怪的行为。这是问题的演示:http://jsfiddle.net/PT3jU/1/

您可以在左侧看到链接“评论”“故事”“订阅”，我希望它们位于底部(在所有“关于我的文本”下方)。我不明白为什么它会这样。任何人都可以提出任何解决方案吗？问题出在 #profContent Div(我想是这样)。

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/