我如何分开两个不同的div？

时间：2014-12-03 17:18:46

标签： html css

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

enter image description here

我似乎无法找到一种方法来分离＆＃34;用户个人资料div＆＃34;关于＆＃34;的文章。如果你需要，我可以发布我的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;
}

页脚还没有完成！

2 个答案:

答案 0 :(得分：2)

添加以下CSS以创建边距：

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

你会看到你正在寻找的div之间的分离。

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

修改

Working JSFiddle

您的保证金声明无效的原因是您已将user_panel框中的所有内容浮动，导致其崩溃。边距是存在的，但它没有在DOM中占用足够的空间来推下content div。

添加此CSS（一个clearfix），它将起作用。

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

重要！ - 不要忘记添加原始保证金：

#user_panel {
  margin-bottom: 25px;
}

答案 1 :(得分：0)

我认为您的问题是您正在浮动user_panel而不是#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;
    float: left;
    clear: both;
}

此外，您还需要向user_panel添加clearfix 

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

这是工作小提琴：

http://jsfiddle.net/lee_gladding/95ovfh5g/

相关问题
最新问题