Question

我正在开发一个社交网络，我的个人资料页面遇到了一些问题。所以我正在做的是有三个div（作为例子）。一个是主要的“帖子”部分，另外两个是“关于我”和“朋友”部分。我的帖子一个漂浮在左边，侧边栏漂浮在右边。当我在右侧边栏上有两个div时，post div不会直接进入封面下方，那里会有一个巨大的空间，好像那里有一个看不见的div http://prntscr.com/3988wj 这是我的HTML

<div id="sidebar">
    <div class="sidebar-container">
        <div class="sidebar-content">
        <div class="sidebar-header">About</div>
            <div class="sidebar-list">Birthday: <b>09/05/2000</b></div>
            <div class="sidebar-list">Gender: <b>Male</b></div>
        </div>
    </div>
</div>
<div id="sidebar">
    <div class="sidebar-container">
        <div class="sidebar-content">
        <div class="sidebar-header">Friends</div>
            <div class="sidebar-list">Birthday: <b>09/05/2000</b></div>
            <div class="sidebar-list">Gender: <b>Male</b></div>
        </div>
    </div>
</div>
<div id="message">
    <div class="message-container">
    <div class="message-content">
        <div class="message-padding">
            <div class="message-avatar"><img src="<?php echo $avatar; ?>"></div>
            <div class="message-author"><a href=""><?php echo $user; ?></a></div>
            <div class="message-date">12/04/2014</div>
        </div>
    </div>
    </div>
</div>

这是我的css

#message {
    float: left;
    margin-left: 20%;
    width: 44.4%;
}
.message-padding {
    padding: 10px 10px 10px 10px;
}
.message-container {
    padding: 0 10px 10px 0;
}
.message-content {
    box-shadow: 0px 1px 1px #CCC;
    border: 1px solid #BFBFBF;
    background: #fff;
    color: #6B6B6B;
    border-radius: 3px;
    overflow: hidden;
    width: 100%;
}
.message-avatar {
    width: 42px;
    height: 42px;
    float: left;
    padding-bottom: 10px;
}
.message-avatar img {
    width: 42px;
    height: 42px;
    border-radius: 3px;
}
.message-author {
    color: #3A5796;
    font-size: 12px;
    cursor: pointer;
    font-weight: bold;
    font-family: Tahoma, Arial, 'Segoe UI', Verdana, sans-serif;
    padding-left: 50px;
    padding-top: 5px;
    text-decoration: none;
}
.message-author a {
    color: #3A5796;
    cursor: pointer;
    font-weight: bold;
    font-family: Tahoma, Arial, 'Segoe UI', Verdana, sans-serif;
    text-decoration: none;
}
.message-date {
    color: #999;
    font-size: 10px;
    cursor: pointer;
    font-weight: bold;
    font-family: Tahoma, Arial, 'Segoe UI', Verdana, sans-serif;
    padding-left: 50px;
    padding-top: 4px;
}
#sidebar {
    float: right;
    margin-right: 19.49%;
    width: 16%;
    clear:both;
}
.sidebar-container {
    padding: 0 10px 10px 0;
}
.sidebar-list {
    margin-top: -1px;
    padding: 7px 10px;
    border-top: 1px solid #EEE;
    font-size: 12px;
}
.sidebar-content {
    box-shadow: 0px 1px 1px #CCC;
    border: 1px solid #BFBFBF;
    background: #fff;
    color: #6B6B6B;
    border-radius: 3px;
    overflow: hidden;
    width: 100%;
}
.sidebar-header {
    background: #f8f8f8;
    padding: 10px;
    font-family: Tahoma, Verdana, Arial, sans-serif;
    font-size: 13px;
    font-weight: bold;
    color: #777;
    border-bottom: 1px solid #EEE;
    width: 100%;
}

是否有任何方法可以使post post进入正确的位置，所以其他post div可以在它下面，而侧边栏中的其他div？谢谢你的帮助！

Answer 1

将两个侧边栏放在div中，然后将div放到右边。

实际上，你可以使用id＆＃34; sidebar＆＃34;来制作两个div。进入一个div。有两个具有相同id的元素无论如何都是无效的。

因此该部分的HTML如下所示：

<div id="sidebar">
    <div class="sidebar-container">
        <div class="sidebar-content">
        <div class="sidebar-header">About</div>
            <div class="sidebar-list">Birthday: <b>09/05/2000</b></div>
            <div class="sidebar-list">Gender: <b>Male</b></div>
        </div>
    </div>

    <!-- Here closing and re-opening the div is removed -->

    <div class="sidebar-container">
        <div class="sidebar-content">
        <div class="sidebar-header">Friends</div>
            <div class="sidebar-list">Birthday: <b>09/05/2000</b></div>
            <div class="sidebar-list">Gender: <b>Male</b></div>
        </div>
    </div>
</div>

结果如下所示：http://jsfiddle.net/48BfU/

左边div之前的CSS大空间，右边有两个div

1 个答案: