<div style="width:600px;overflow:hidden;">
<img src="mr.jpg" alt="" style="width:100px;float:left;"/>
這里方內容就可以了
<div>
❷ 如何通過css實現文字可以圍繞圖片而不另起一行
有好幾種辦法啊,如果你的圖片和文字都是行內元素,就這樣
css代碼:
.pic,.text{ vertical-align:top;}
html代碼:
<div>
<img class="pic" src="a.jpg" width="110" height="140" alt="" />
<span class="text">這是一張圖片這是一張圖片這是一張圖片這是一張圖片</span>
</div>
如果文字是塊級元素就這樣:
css代碼:
.pic{ float:left; width:110px; height:140px;}
.text{ margin-left:110px;}
html代碼:
<div>
<img class="pic" src="a.jpg" width="110" height="140" alt="" />
<p class="text">這是一張圖片這是一張圖片這是一張圖片這是一張圖片</p>
</div>
❸ 網頁中圖片如何設置文字圍繞
網頁中文字環繞圖片效果的實現
1、直接設定文字環繞圖片
<div style="width: 400px; border: 1px solid
#CCCCCC">
<img id="img" src="images/photo_01.gif"
style="float: left; clear: left; width: 120px; height: 120px;
padding: 10px" />
某某公司是生產銷售新型電子材料、服裝、傢具的專業廠家,有自營進出口權,年銷售額過億元。<br/>新型電子材料產品已在全國各大電子企業、軍工企業以及航天、鍾表、珠寶首飾等行業享有較高的知名度。
服裝暢銷北美、歐洲、大洋洲<br/>我要實現左上
角是圖片,然後就是文字環繞在圖片的右邊,像下面的效果圖一樣。
</div>
2、用CSS實現文字環繞圖片的效果
以下是引用片段:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<style>
div {
width:300px;
border:1px solid red
}
img {
float:left;
width:100px;
height:100px
}
</style>
<div>
<img src="images/photo_01.gif"
/>
某某公司是生產銷售新型電子材料、服裝、傢具的專業廠家,有自營進出口權,年銷售額過億元。<br/>新型電子材料產品已在全國各大電子企業、軍工企業以及航天、鍾表、珠寶首飾等行業享有較高的知名度。
服裝暢銷北美、歐洲、大洋洲<br/>我要實現左上
角是圖片,然後就是文字環繞在圖片的右邊,像下面的效果圖一樣。
</div>
❹ div文字這樣環繞圖片!css怎麼定義!
方法很分多,可以把圖片和文字分別放在div中然後浮動即可。
我寫一個給你,稍等!
<!doctypehtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>Document</title>
<style>
img{
float:left;
}
</style>
</head>
<body>
<div>
<imgsrc="test1.jpg"alt="">
<ul>
<li>地址:***********</li>
<li>電話:1111111111</li>
<li>聯系人:大大大大大大</li>
</ul>
</div>
</body>
</html>
你自己再改一改,有用就採納!
❺ 關於div+css實現文字環繞圖片的問題
HTML代碼如下:
<div class="wrap_area">
<img src="wrap-subject01.jpg" class="no_border" alt="Lunar eclipse photo" />
<div class="shape_wrap">
<div style="width: 250px;"></div>
<div style="width: 280px;"></div>
<div style="width: 305px;"></div>
</div>
<p>Numerous blocks of text</p>
</div>
CSS代碼大致如下:
div.wrap_area { position: relative; }
div.wrap_area img { position: absolute; left: 0px; top: 0px; }
div.wrap_area p { position: relative; }
div.shape_wrap div { float: left; clear: left; height: 20px; }
詳見文章http://www.xland.com.cn/article/29/33/0806/28927.htm
❻ css圖文混排 圖片被文字包圍要怎麼實現
如果是文字包圍圖片的一邊,可以把圖片浮動,文字就會圍繞這圖片。如果是圖片四周圍繞的文字的話就比較麻煩,其中一個方法是把圖片定位在段落中間,把圖片遮住的文字用空格代替就可以了,適合不規則圖片。