亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

為什么用float兩列布局做不起來?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>無標題文檔</title>

<style type="text/css">

.mainbody{width:600px;}

.mainbody.left{width:100px;float:left}

.mainbody.right{width:500px;float:left;}


</style>

</head>


<body>

<div class="mainbody">

<div class="left"><img src="file:///C|/Users/Admini/Desktop/wifi.jpg" />

</div>

<div class="right">

<h6>報復社會的少女</h6>

<p>您已經對代碼進行了修改,如果要編輯選定對象的屬性,請點擊刷新或按F5</p>

<span>10分鐘之前</span>

</div>

</div>


</body>

</html>

</style>

</head>


<body>

<div class="mainbody">

<div class="left"><img src="file:///C|/Users/Admini/Desktop/wifi.jpg" />

</div>

<div class="right">

<h6>報復社會的少女</h6>

<p>您已經對代碼進行了修改,如果要編輯選定對象的屬性,請點擊刷新或按F5</p>

<span>10分鐘之前</span>

</div>

</div>


</body>

</html>


正在回答

5 回答

.mainbody.left{width:100px;float:left}

.mainbody.right{width:500px;float:left;}

  • 這段代碼的.left與.right前面缺少一個空格,具體原因請查看HTML-CSS基礎學習的8-7包含(后代)選擇器的相關學習;

    .mainbody .left{width:100px;float:left}

    .mainbody .right{width:500px;float:left;}

  • 還有那個overflow:hidden是針對緊鄰其后的元素進行清除浮動設置,而不是針對其本身。

  • 建議你寫代碼時適當縮進,這樣不容易出錯,希望對你有幫助。


1 回復 有任何疑惑可以回復我~
#1

卡蘭尼克 提問者

非常感謝!
2016-10-25 回復 有任何疑惑可以回復我~

57fb50ec0001306c05000282.jpg

57fb50ed00010fb005000282.jpg



老師也是這樣寫的 為什么她的可以浮動我的不可以呀


0 回復 有任何疑惑可以回復我~

老師也是這樣寫的,為什么他的就可以浮動我的不可以啊
57fb50620001b8b503840216.jpg

57fb506700018b9403840216.jpg

0 回復 有任何疑惑可以回復我~

圖片也要浮動啊

0 回復 有任何疑惑可以回復我~
#1

卡蘭尼克 提問者

謝謝o(≧v≦)o
2016-10-10 回復 有任何疑惑可以回復我~

額 代碼多復制了一層

? 加了overflow:hidden;或者把right{}中改成右浮動float:right;都沒用

0 回復 有任何疑惑可以回復我~

舉報

0/150
提交
取消
網頁簡單布局之結構與表現原則
  • 參與學習       108290    人
  • 解答問題       395    個

入門必殺技之結構與表現相分離,課程會有3個案例,不同角度講解

進入課程

為什么用float兩列布局做不起來?

我要回答 關注問題
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號