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

向overflow:hidden和#profContainer添加#profContent似乎可以解决问题。

Answer 2

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

或

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

Answer 3

将#profDetails设为float: left;或将clear: both;添加至#profContent

假设你确实需要profdetails浮动，那么clear就是你应该如何将元素推送到浮动对象

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

Answer 4

向左移至#profContainer和#profContent。

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

Answer 5

当#profDetails向右浮动时，您所看到的是正确的行为，但如果您希望#profContent低于#profDetails，则需要将clear:right应用于#profContent {{1}}：

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

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

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

7 个答案: