課程
/前端開發(fā)
/HTML/CSS
/網(wǎng)頁簡(jiǎn)單布局之結(jié)構(gòu)與表現(xiàn)原則
為什么我的大盒子最后檢查沒有高度呢？
2017-09-15
源自：網(wǎng)頁簡(jiǎn)單布局之結(jié)構(gòu)與表現(xiàn)原則 2-1
正在回答
你大概指的是，為什么邊框只有一條線，這是因?yàn)楸緛砀冈鼐蜎]有撐開高度， ?.demo01 .left與.demo01 .right，已經(jīng)設(shè)置了浮動(dòng)， 浮動(dòng)元素會(huì)脫離正常流，即好像從流中刪除了，完全不占據(jù)空間，所以父元素也就沒有高度了。
額，我沒改里面的東西。只是將body標(biāo)簽補(bǔ)充完整。然后就沒了
qq_新爺_0 提問者
慕UI3572425 回復(fù) qq_新爺_0 提問者
自己看去
<html>
<head>
<style>
? ? ?*{
? ? ? ? margin: 0;
? ? ? ? padding:0;
? ? ?}
? .demo01{
? ? ?width: 600px;
? ? ?position: relative;
? ? ?margin-top:20px;
? ? ?margin-left:20px;
? ? ?border: 1px solid red;
? }
? .demo01 .left{
? ? ?width: 100px;
? ? ?float: left;
? ? ?/*overflow: hidden;*/
? .demo01 .left img{
? .demo01 .right{?
? ? ?width: 450px;
? ? ?float: right;
? ? ?border: 1px solid #ccc;
? ? ?background: #9cf;
? ? ?padding: 20px;
? .demo01 .right p{
? ? ?font-size: 15px;
? ? ?line-height: 15px;
? .demo01 .right span{
? ? ?position: absolute;
? ? ?right: 20px;
? ? ?top: 10px;
? ? ?font-size: 12px;
? </style>
</head>
<body>
? <div class="demo01">
? <div class="left"><img src="../images/images_11.gif" alt=""> </div>
? <div class="right">
? ? ?<h6>櫻桃小丸子</h6>
? ? ?<span>10分鐘之前</span>
? <p>圍毆?dú)W文參考下決定歐瑞我去，今天終于上了，學(xué)了html和css好開心</p>
? </div>
</body>
</html>
最后說一句 你能把你代碼多檢查幾遍嗎？
<style> ? ? ?*{ ? ? ? ? margin: 0; ? ? ? ? padding:0; ? ? ?} ? .demo01{ ? ? ?width: 600px; ? ? ?position: relative; ? ? ?margin-top:20px; ? ? ?margin-left:20px; ? ? ?border: 1px solid red; ? } ? .demo01 .left{ ? ? ?width: 100px; ? ? ?float: left; ? ? ?/*overflow: hidden;*/ ? } ? .demo01 .left img{ ? ? ?width: 100px; ? } ? .demo01 .right{ ? ? ?width: 450px; ? ? ?float: right; ? ? ?border: 1px solid #ccc; ? ? ?background: #9cf; ? ? ?padding: 20px; ? } ? .demo01 .right p{ ? ? ?font-size: 15px; ? ? ?line-height: 15px; ? } ? .demo01 .right span{ ? ? ?position: absolute; ? ? ?right: 20px; ? ? ?top: 10px; ? ? ?font-size: 12px; ? } ? </style></head><body> ? <div class="demo01"> ? <div class="left"><img src="../images/images_11.gif" alt=""> </div> ? <div class="right"> ? ? ?<h6>櫻桃小丸子</h6> ? ? ?<span>10分鐘之前</span> ? <p>圍毆?dú)W文參考下決定歐瑞我去，今天終于上了，學(xué)了html和css好開心</p> ? </div> ? </div>
body
發(fā)一下代碼，
額，你確定你有寫嗎？？
舉報(bào)
入門必殺技之結(jié)構(gòu)與表現(xiàn)相分離，課程會(huì)有3個(gè)案例，不同角度講解
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號(hào)-11 京公網(wǎng)安備11010802030151號(hào)
購課補(bǔ)貼聯(lián)系客服咨詢優(yōu)惠詳情
慕課網(wǎng)APP您的移動(dòng)學(xué)習(xí)伙伴
掃描二維碼關(guān)注慕課網(wǎng)微信公眾號(hào)
2017-10-28
你大概指的是，為什么邊框只有一條線，這是因?yàn)楸緛砀冈鼐蜎]有撐開高度， ?.demo01 .left與.demo01 .right，已經(jīng)設(shè)置了浮動(dòng)， 浮動(dòng)元素會(huì)脫離正常流，即好像從流中刪除了，完全不占據(jù)空間，所以父元素也就沒有高度了。
2017-09-18
額，我沒改里面的東西。只是將body標(biāo)簽補(bǔ)充完整。然后就沒了
2017-09-18
自己看去
2017-09-18
<html>
<head>
<style>
? ? ?*{
? ? ? ? margin: 0;
? ? ? ? padding:0;
? ? ?}
? .demo01{
? ? ?width: 600px;
? ? ?position: relative;
? ? ?margin-top:20px;
? ? ?margin-left:20px;
? ? ?border: 1px solid red;
? }
? .demo01 .left{
? ? ?width: 100px;
? ? ?float: left;
? ? ?/*overflow: hidden;*/
? }
? .demo01 .left img{
? ? ?width: 100px;
? }
? .demo01 .right{?
? ? ?width: 450px;
? ? ?float: right;
? ? ?border: 1px solid #ccc;
? ? ?background: #9cf;
? ? ?padding: 20px;
? }
? .demo01 .right p{
? ? ?font-size: 15px;
? ? ?line-height: 15px;
? }
? .demo01 .right span{
? ? ?position: absolute;
? ? ?right: 20px;
? ? ?top: 10px;
? ? ?font-size: 12px;
? }
? </style>
</head>
<body>
? <div class="demo01">
? <div class="left"><img src="../images/images_11.gif" alt=""> </div>
? <div class="right">
? ? ?<h6>櫻桃小丸子</h6>
? ? ?<span>10分鐘之前</span>
? <p>圍毆?dú)W文參考下決定歐瑞我去，今天終于上了，學(xué)了html和css好開心</p>
? </div>
? </div>
</body>
</html>
2017-09-18
最后說一句 你能把你代碼多檢查幾遍嗎？
2017-09-18
<style>
? ? ?*{
? ? ? ? margin: 0;
? ? ? ? padding:0;
? ? ?}
? .demo01{
? ? ?width: 600px;
? ? ?position: relative;
? ? ?margin-top:20px;
? ? ?margin-left:20px;
? ? ?border: 1px solid red;
? }
? .demo01 .left{
? ? ?width: 100px;
? ? ?float: left;
? ? ?/*overflow: hidden;*/
? }
? .demo01 .left img{
? ? ?width: 100px;
? }
? .demo01 .right{
? ? ?width: 450px;
? ? ?float: right;
? ? ?border: 1px solid #ccc;
? ? ?background: #9cf;
? ? ?padding: 20px;
? }
? .demo01 .right p{
? ? ?font-size: 15px;
? ? ?line-height: 15px;
? }
? .demo01 .right span{
? ? ?position: absolute;
? ? ?right: 20px;
? ? ?top: 10px;
? ? ?font-size: 12px;
? }
? </style>
</head>
<body>
? <div class="demo01">
? <div class="left"><img src="../images/images_11.gif" alt=""> </div>
? <div class="right">
? ? ?<h6>櫻桃小丸子</h6>
? ? ?<span>10分鐘之前</span>
? <p>圍毆?dú)W文參考下決定歐瑞我去，今天終于上了，學(xué)了html和css好開心</p>
? </div>
? </div>
body
2017-09-18
發(fā)一下代碼，
2017-09-15
額，你確定你有寫嗎？？