                        課程
                    
                        /前端開發(fā)
                        
                            /HTML/CSS
                        
                        /從 psd 到 html

為什么我的panel部分和footer部分重合了

這個(gè)怎么辦啊，求解答

風(fēng)清云淡wjf

2016-09-04

源自：從 psd 到 html 4-4

關(guān)注問題我要回答

2395

操作

收起

4 回答

丨nteResTing
2017-04-29

.clearfloat{
????zoom:1;
}
.clearfloat:after{
????clear:?both;
????content:?'.';
????display:?block;
????width:?0;
????height:?0;
????visibility:?hidden;
}

把重置樣式改成上面的那樣，就不會(huì)出現(xiàn)問題了。

原因就是由于子元素都用了浮動(dòng)，而父級(jí)元素需要用它的子元素來實(shí)現(xiàn)高度自適應(yīng)，不然如果父級(jí)元素沒有高度或者內(nèi)容，子級(jí)元素的排版就不受父級(jí)元素的控制。

添加了一個(gè)句號(hào)content:"."，并且把它的display設(shè)置成block；高度設(shè)為0；clear設(shè)為both；visibility設(shè)為隱藏。這樣父級(jí)元素有了一個(gè)"."的內(nèi)容，就達(dá)到了撐開容器的目的。

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

FUKUA
2016-12-06

我也是出這種問題了，怎么解決的？重置樣式哪錯(cuò)了？

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

風(fēng)清云淡wjf 提問者
2016-09-05

.index-banner{
????position:?relative;
????background:?#b3b3b3;
}
.index-banner-bg?{
????height:?570px;
????overflow:?hidden;
????text-align:?center;
}
.index-banner-text{
????position:?absolute;
????top:?210px;
????left:50%;
????margin-left:?-388px;
}
.index-banner-text?.text-logo{
????width:?776px;
????height:?111px;
????background:?url("../images/text-logo.png");
}
.index-banner-text?.text-info{
????margin-top:?21px;
????text-align:?center;
????color:?#fff;
}
.index-banner-text?.text-info?.line{
????width:?40px;
????display:?inline-block;
????border-bottom:?solid?1px?#ffffff?;
}
.index-banner-text?.text-info?.text{
????margin:?0?26px;
????vertical-align:?middle;
}
/*菜單*/
.index-menu{
????position:?relative;
????border-top:?4px?solid?#f34949;
}
.index-menu?.menu-tips{
????position:?absolute;
????left:?50%;
????top:0;
????margin-left:?-78px;
????width:?156px;
????height:?75px;
????text-align:?center;
????line-height:?65px;
????color:?#fff;
????background:#f34949;
}
/*倒三角(可以不用切圖)，偽元素*/
.index-menu?.menu-tips:after{
????position:?absolute;
????content:?'';
????left:?0;
????bottom:?0;
????width:?0;
????height:0;
????border-left:78px?solid?transparent;
????border-right:78px?solid?transparent;
????border-bottom:10px?solid?#fff;
}
.index-menu?.menu-list{
????margin-top:?152px;
????color:?#555;
????overflow:?hidden;
}
/*布局小技巧（+60）*/
.index-menu?.menu-list?ul{
????width:?1160px;
}
.index-menu?.menu-item{
????float:?left;
????width:?520px;
????margin-right:?60px;
????margin-bottom:?56px;
}
.index-menu?.menu-item?.title,.index-menu?.menu-item?.line{
????float:?left;
}
.index-menu?.menu-item?.price{
????float:?right;
}
.index-menu?.menu-item?.title{
????width:?230px;
????overflow:?hidden;
????white-space:?nowrap;
????text-overflow:?ellipsis;
????color:?#555555;
}
.index-menu?.menu-item?.comment{
????margin-top:?4px;
????color:?#b7b7b7;
????font-size:?12px;
}
.index-menu?.menu-item?.line{
????margin-top:?10px;
????width:?192px;
????border-bottom:?1px?solid?#e3e1e1;
}
.index-menu?.menu-more-btn{
????margin:?0?auto;
????width:?114px;
????height:?34px;
????padding-left:16px?;
????border:?1px?solid?#d7d5d5;
????font-size:?14px;
????line-height:?32px;
????color:?#b7b7b7;
}
.index-menu?.menu-more-btn?.icon{
????display:inline-block;
????width:?11px;
????height:?7px;
????margin-left:?11px;
????background:?url("../images/menu-btn-icon.gif");
}
.index-panel{
????margin-top:?200px;
}
.index-panel-header?h3{
????float:?left;
????margin-right:?48px;
????font-size:?20px;
????color:?#3b3b3b;
????font-weight:?normal;
}
.index-panel-header?.line{
????float:?left;
????margin-left:?7px;
????width:?200px;
????border:?1px?solid?#e5e3e3;
}
.index-panel-header?.btn-group{
????font-size:?0;
????float:?right;
}
.index-panel-header?.btn{
????display:?inline-block;
????margin-left:?11px;
????width:?9px;
????height:?9px;
????background:?#dedede;
????border-radius:?50%;
}
.index-panel-header?.active{
????background:?#9b9b9b;
}
.index-panel-body{
????margin-top:?75px;
}
這是css代碼

<!DOCTYPE html>
<html lang="en">
<head>
? ?<meta charset="UTF-8">
? ?<title></title>
? ?<link rel="stylesheet" href="css/reset.css">
? ?<link rel="stylesheet" href="css/common.css">
? ?<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div class="public-header">
? ?<div class="public-container clearfloat">
? ? ? ?<div class="header-logo"><a href=""></a></div>
? ? ? ?<ul class="header-nav clearfloat">
? ? ? ? ? ?<li class="item"><a href="">Our Story</a> </li>
? ? ? ? ? ?<li class="item"><a href=""> Menu</a></li>
? ? ? ? ? ?<li class="item"><a href=""> Reservations</a></li>
? ? ? ? ? ?<li class="item"><a href=""> News</a></li>
? ? ? ? ? ?<li class="item"><a href="">Rviews</a></li>
? ? ? ?</ul>
? ?</div>
</div>
<div class="index-banner">
? ?<div class="public-container index-banner-bg">
? ?<img src="images/demo1.jpg" alt="banner" />
? ?</div>
? ?<div class="index-banner-text">
? ? ? ?<div class="text-logo"></div>
? ? ? ?<p class="text-info">
? ? ? ? ? ?<i class="line"></i>
? ? ? ? ? ? ? ?<span class="text">resto restaurant home page website template</span>
? ? ? ? ? ?<i class="line"></i>
? ? ? ?</p>
? ?</div>
</div>
<div class="index-menu">
? ?<div class="menu-tips">The Menu</div>
? ?<div class="public-container menu-list">
? ? ? ?<ul class="clearfloat">
? ? ? ? ? ?<li class="menu-item clearfloat">
? ? ? ? ? ? ? ?<div>
? ? ? ? ? ? ? ? ? ?<a ?class="title">
? ? ? ? ? ? ? ? ? ? ? ?<h4>Voluptate cillum fugiat.</h4>
? ? ? ? ? ? ? ? ? ? ? ?<p class="comment">Cheese, tomato, mushrooms, onions.</p>
? ? ? ? ? ? ? ? ? ?</a>
? ? ? ? ? ? ? ?</div>
? ? ? ? ? ? ? ?<div class="line"></div>
? ? ? ? ? ? ? ?<div class="price">$50</div>
? ? ? ? ? ?</li>
? ? ? ? ? ?<li class="menu-item clearfloat">
? ? ? ? ? ? ? ?<div>
? ? ? ? ? ? ? ? ? ?<a ?class="title">
? ? ? ? ? ? ? ? ? ? ? ?<h4>Voluptate cillum fugiat.</h4>
? ? ? ? ? ? ? ? ? ? ? ?<p class="comment">Cheese, tomato, mushrooms, onions.</p>
? ? ? ? ? ? ? ? ? ?</a>
? ? ? ? ? ? ? ?</div>
? ? ? ? ? ? ? ?<div class="line"></div>
? ? ? ? ? ? ? ?<div class="price">$50</div>
? ? ? ? ? ?</li>
? ? ? ? ? ?<li class="menu-item clearfloat">
? ? ? ? ? ? ? ?<div>
? ? ? ? ? ? ? ? ? ?<a ?class="title">
? ? ? ? ? ? ? ? ? ? ? ?<h4>Voluptate cillum fugiat.</h4>
? ? ? ? ? ? ? ? ? ? ? ?<p class="comment">Cheese, tomato, mushrooms, onions.</p>
? ? ? ? ? ? ? ? ? ?</a>
? ? ? ? ? ? ? ?</div>
? ? ? ? ? ? ? ?<div class="line"></div>
? ? ? ? ? ? ? ?<div class="price">$50</div>
? ? ? ? ? ?</li>
? ? ? ? ? ?<li class="menu-item clearfloat">
? ? ? ? ? ? ? ?<div>
? ? ? ? ? ? ? ? ? ?<a ?class="title">
? ? ? ? ? ? ? ? ? ? ? ?<h4>Voluptate cillum fugiat.</h4>
? ? ? ? ? ? ? ? ? ? ? ?<p class="comment">Cheese, tomato, mushrooms, onions.</p>
? ? ? ? ? ? ? ? ? ?</a>
? ? ? ? ? ? ? ?</div>
? ? ? ? ? ? ? ?<div class="line"></div>
? ? ? ? ? ? ? ?<div class="price">$50</div>
? ? ? ? ? ?</li>
? ? ? ? ? ?<li class="menu-item clearfloat">
? ? ? ? ? ? ? ?<div>
? ? ? ? ? ? ? ? ? ?<a ?class="title">
? ? ? ? ? ? ? ? ? ? ? ?<h4>Voluptate cillum fugiat.</h4>
? ? ? ? ? ? ? ? ? ? ? ?<p class="comment">Cheese, tomato, mushrooms, onions.</p>
? ? ? ? ? ? ? ? ? ?</a>
? ? ? ? ? ? ? ?</div>
? ? ? ? ? ? ? ?<div class="line"></div>
? ? ? ? ? ? ? ?<div class="price">$50</div>
? ? ? ? ? ?</li>
? ? ? ? ? ?<li class="menu-item clearfloat">
? ? ? ? ? ? ? ?<div>
? ? ? ? ? ? ? ? ? ?<a ?class="title">
? ? ? ? ? ? ? ? ? ? ? ?<h4>Voluptate cillum fugiat.</h4>
? ? ? ? ? ? ? ? ? ? ? ?<p class="comment">Cheese, tomato, mushrooms, onions.</p>
? ? ? ? ? ? ? ? ? ?</a>
? ? ? ? ? ? ? ?</div>
? ? ? ? ? ? ? ?<div class="line"></div>
? ? ? ? ? ? ? ?<div class="price">$50</div>
? ? ? ? ? ?</li>
? ? ? ? ? ?<li class="menu-item clearfloat">
? ? ? ? ? ? ? ?<div>
? ? ? ? ? ? ? ? ? ?<a ?class="title">
? ? ? ? ? ? ? ? ? ? ? ?<h4>Voluptate cillum fugiat.</h4>
? ? ? ? ? ? ? ? ? ? ? ?<p class="comment">Cheese, tomato, mushrooms, onions.</p>
? ? ? ? ? ? ? ? ? ?</a>
? ? ? ? ? ? ? ?</div>
? ? ? ? ? ? ? ?<div class="line"></div>
? ? ? ? ? ? ? ?<div class="price">$50</div>
? ? ? ? ? ?</li>
? ? ? ? ? ?<li class="menu-item clearfloat">
? ? ? ? ? ? ? ?<div>
? ? ? ? ? ? ? ? ? ?<a ?class="title">
? ? ? ? ? ? ? ? ? ? ? ?<h4>Voluptate cillum fugiat.</h4>
? ? ? ? ? ? ? ? ? ? ? ?<p class="comment">Cheese, tomato, mushrooms, onions.</p>
? ? ? ? ? ? ? ? ? ?</a>
? ? ? ? ? ? ? ?</div>
? ? ? ? ? ? ? ?<div class="line"></div>
? ? ? ? ? ? ? ?<div class="price">$50</div>
? ? ? ? ? ?</li>
? ? ? ?</ul>
? ?</div>
? ?<a href="#" class="menu-more-btn">Load More<span>|</span><span class="icon"></span></a>
</div>
<div class="public-container index-panel">
? ?<div class="index-panel-header clearfloat">
? ? ? ?<h3>Featured Dishes</h3>
? ? ? ?<div class="line"></div>
? ? ? ?<div class="btn-group">
? ? ? ? ? ?<a href="" class="btn "></a>
? ? ? ? ? ?<a href="" class="btn active"></a>
? ? ? ? ? ?<a href="" class="btn"></a>
? ? ? ? ? ?<a href="" class="btn"></a>
? ? ? ?</div>
? ?</div>
? ?<div class="index-panel-body"></div>
</div>
<div class="public-container index-panel">
</div>
<div class="public-footer">
? ?<div class="public-container">
? ? ? ?<div class="footer-col">
? ? ? ? ? ?<p>New York Restaurant<br />3926 Anmoore Road<br />New York, NY 10014</p>
? ? ? ? ? ?<a href="">718-749-1714</a>
? ? ? ?</div>
? ? ? ?<div class="footer-col">
? ? ? ? ? ?<p>France Restaurant<br />68, rue ?de la Couronne<br />75002 PARIS<br />02.94.23.69.56</p>
? ? ? ?</div>
? ? ? ?<div class="footer-col">
? ? ? ? ? ?<a href="">Blog</a>
? ? ? ? ? ?<a href=""> Careers</a>
? ? ? ? ? ?<a href="">Privacy Policy</a>
? ? ? ? ? ?<a href="">Contact</a>
? ? ? ?</div>
? ? ? ?<div class="footer-col">
? ? ? ? ? ?<div class="footer-logo">
? ? ? ? ? ? ? ?<a href=""></a>
? ? ? ? ? ?</div>
? ? ? ? ? ?<p>? All Rights Reserved 2014.<br /> Find ?More at Pixelhint.com</p>
? ? ? ?</div>
? ?</div>
</div>

</body>
</html>