html - 我怎样才能分开两个不同的div？

Question

基本上，我使用了从中断标记到填充和边距的所有内容，但似乎没有任何效果。我的问题出在这张图片上:

我似乎无法找到一种方法来分离“用户个人资料 div”和“文章”。如果您需要，我可以发布我的 CSS!

编辑:

HTML:

<!-- begin user_panel -->

    <div id="user_panel">

    <!-- user_img -->

        <div id="user_img">
            <center><a href="#"><img src="images/avtr.png" alt="" title="Welcome, wallensteiN." /></a></center>
        </div>

    <!-- user_profile -->

        <div id="user_profile">
            <table>
                <tr>
                    <td style="width: 300px; float: left;">
                        <h1>Welcome, <a href="#">wallensteiN</a>.</h1>
                        <p> &bull; Last visit: Dec 01, 2014; 15:30.<br> &bull; You currently have <span class="online">5</span> friends online.<br> &bull; <a href="#">Inbox</a> - no new messages.<br> &bull; <a href="#">Edit</a> your profile.<br> &bull; <a href="#">Chat</a> with the community!<br> &bull; <a href="#">Change</a> password.<br> &bull; <a href="#">Log out</a> of this session.</p>
                    </td>
                    <td style="width: 500px; float: right;">
                        <h1>Latest activity on the website</h1>
                        <p> &bull; <a href="#">wallensteiN</a> commented in <a href="#">How to get better at DotA in 3 steps</a>.<br> &bull; <a href="#">Artzeezy</a> commented in <a href="#">Interview with EG's Arteezy</a>.<br> &bull; <a href="#">NewsBot</a> posted <a href="#">Interview with EG's Arteezy</a>.<br> &bull; <a href="#">NewsBot</a> posted <a href="#">How to get better at DotA in 3 steeps</a>.</p>
                    </td>
                </tr>
            </table>
        </div>

    </div>

<!-- end user_panel -->

<!-- begin content -->

    <div id="content">

    <!-- begin slider -->

        <div id="slider">

        </div>

    <!-- end slider -->

    <!-- begin article -->

        <div id="article">

            <h1><a href="#">Welcome to "Shooter"</a></h1>
            <p> &bull; Enjoy this template!</p>

            <h1><a href="#">Interview with EG's Arteezy</a></h1>
            <p> &bull; Able an hope of body. Any nay shyness article matters own removal nothing his forming. Gay own additions education satisfied the perpetual. If he cause manor happy. Without farther she exposed saw man led. Along on happy could cease green oh.</p>
            <p> &bull; Is we miles ready he might going. Own books built put civil fully blind fanny. Projection appearance at of admiration no. As he totally cousins warrant besides ashamed do. Therefore by applauded acuteness supported affection it. Except had sex limits county enough the figure former add. Do sang my he next mr soon. It merely waited do unable.</p>

            <h1><a href="#">How to become better at DotA in 3 steps</a></h1>
            <p> &bull; Yourself required no at thoughts delicate landlord it be. Branched dashwood do is whatever it. Farther be chapter at visited married in it pressed. By distrusts procuring be oh frankness existence believing instantly if. Doubtful on an juvenile as of servants insisted. Judge why maids led sir whose guest drift her point. Him comparison especially friendship was who sufficient attachment favourable how. Luckily but minutes ask picture man perhaps are inhabit. How her good all sang more why.</p>
            <p> &bull; Sense child do state to defer mr of forty. Become latter but nor abroad wisdom waited. Was delivered gentleman acuteness but daughters. In as of whole as match asked. Pleasure exertion put add entrance distance drawings. In equally matters showing greatly it as. Want name any wise are able park when. Saw vicinity judgment remember finished men throwing.</p>
        </div>

    <!-- end article -->

    <!-- begin sidebar -->

        <div id="sidebar">

        </div>

    <!-- end sidebar -->

    </div>

<!-- end content -->

CSS

/* begin user panel */

#user_panel{
width: 1100px;
margin: 0 auto;
margin-top: 25px;
}

#user_panel #user_img{
width: 200px;
height: 200px;
float: left;
background: rgba(0, 0, 0, 0.8);
box-shadow:  0px 0px 10px rgba(0, 0, 0, 0.701961);
border: 10px solid #F90;
}

#user_panel #user_img img{
margin-top: 25px;
box-shadow:  0px 0px 10px rgba(0, 0, 0, 0.701961);
border: 1px solid #111;
}

#user_panel #user_profile{
width: 850px;
height: 200px;
float: right;
background: rgba(0, 0, 0, 0.8);
box-shadow:  0px 0px 10px rgba(0, 0, 0, 0.701961);
border: 10px solid #F90;
}

#user_panel #user_profile a{
color: #F90;
}

#user_panel #user_profile a:hover{
color: #FFF;
}

#user_panel #user_profile h1{
font-family: Century Gothic;
font-size: 23px;
color: #FFF;
padding-left: 15px;
}

#user_panel #user_profile p{
font-family: Century Gothic;
font-size: 15px;
color: #FFF;
padding-left: 15px;
}

/* begin content */

#content{
width: 1065px;
margin: 0 auto;
background: rgba(0, 0, 0, 0.8);
box-shadow:  0px 0px 10px rgba(0, 0, 0, 0.701961);
border: 10px solid #F90;
overflow: auto;
padding-left: 15px;
margin-bottom: 25px;
}

#content #slider{

}

#content #article{
float: left;
width: 700px;
}

#content #article h1{
width: 500px;
font-family: Century Gothic;
font-size: 23px;
border-bottom: 5px solid #F90;
}

#content #article p{
font-family: Century Gothic;
font-size: 15px;
color: #FFF;
}

页脚还没有完成!

Answer 1

添加以下 CSS 以创建边距:

#user_panel {
  margin-bottom: 20px; /* <- Adjust this number to suit your needs */
}

您会看到您正在寻找的 div 之间的分隔。

您使用 margin: 0 auto; 为顶部和底部分配一个 0 边距，然后再给它一个 margin-top: 25px; 处理顶部，但你永远不会在底部留出空间。这就是它与顶部面板齐平的原因。

---

编辑

Working JSFiddle

您的 margin 声明不起作用的原因是您在 user_panel 框中 float 了所有内容，这导致它折叠。边距在那里，但它没有在 DOM 中占用足够的空间来下推 content div。

添加这个 CSS(一个 clearfix)，它就会起作用。

#user_panel:after {
  content: '';
  display: table;
  clear: both;
}

重要! – 不要忘记添加原始边距:

#user_panel {
  margin-bottom: 25px;
}