                        課程
                    
                        /前端開發(fā)
                        
                            /HTML/CSS
                        
                        /網(wǎng)頁簡單布局之結(jié)構(gòu)與表現(xiàn)原則

現(xiàn)在這個點，有人來解決我浮動相關(guān)的問題嗎？

我這里是做到第三種思路，做到后面把圖片移出來，但是我移出來就是這種效果 ?直接上圖吧。

<!DOCTYPE?html>
<html>
<head>
<meta?charset="UTF-8">
<title>Document</title>
<style?type="text/css">
body{margin:?0;
padding:?0;
}
.demo01{
width:?600px;
position:?relative;
}
.left{
width:?100px;
float:?left;
margin-left:?20px;
}
.right{
width:?438px;
float:?right;
background-color:?#9cf;
border:?1px?solid?#ccc;
padding:?20px;
margin-bottom:?20px;
}
span{
position:?absolute;
top:?10px;
right:?20px;
}

.demo02{
width:?600px;
position:?relative;
overflow:?hidden;
}

.right2{
width:?438px;
float:?right;
background-color:?#9cf;
border:?1px?solid?#ccc;
padding:?20px;
}
span2{
position:?absolute;
top:?10px;
right:?20px;
}
.demo02?img{
float:?left;
margin-left:?20px;
}

.demo03{
width:?438px;
position:?relative;
overflow:?hidden;
background-color:?#9cf;
border:?1px?solid?#ccc;
padding:?20px;
margin-left:??120px;
}

span3{
position:?absolute;
top:?10px;
right:?20px;
}
.demo03?img{
float:?left;
margin-left:-50px;
}

</style>
</head>
<body>
<div>
<div>
<img?src="C:\Users\Administrator\Desktop\小作業(yè)\頭像.png">?
</div>
<div>
<h1>伊利巧樂茲：</h1>
<p>時光匆匆?你還在?時光匆匆??美好的事物?那些感傷?都已走了嗎？你還在。還是那么美好，融化著生活的點點滴滴讓我?[...]</p>
<span>十分鐘前</span>
</div>
</div>
<div>
<img?src="C:\Users\Administrator\Desktop\小作業(yè)\頭像.png">?
<div>
<h1>伊利巧樂茲：</h1>
<p>時光匆匆?你還在?時光匆匆??美好的事物?那些感傷?都已走了嗎？你還在。還是那么美好，融化著生活的點點滴滴讓我?[...]</p>
<span2>十分鐘前</span2>
</div>
</div>
<hr/>
<div>
<img?src="C:\Users\Administrator\Desktop\小作業(yè)\頭像.png">?
<h1>伊利巧樂茲：</h1>
<p>時光匆匆?你還在?時光匆匆??美好的事物?那些感傷?都已走了嗎？你還在。還是那么美好，融化著生活的點點滴滴讓我?[...]</p>
<span2>十分鐘前</span2>
</div>
</body>
</html>