溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

CSS怎么實(shí)現(xiàn)左圖右文混排布局

發(fā)布時(shí)間：2021-08-02 16:10:45 來源：億速云 閱讀：355 作者：chen 欄目：web開發(fā)

本篇內(nèi)容主要講解“CSS怎么實(shí)現(xiàn)左圖右文混排布局”，感興趣的朋友不妨來看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“CSS怎么實(shí)現(xiàn)左圖右文混排布局”吧!

CSS圖文混排是我們布局網(wǎng)頁時(shí)經(jīng)常要用到的布局方法，本實(shí)例就是一個(gè)典型的左圖右文的常用布局，美觀大方，方法簡(jiǎn)便，你可以運(yùn)行一下代碼，看下效果，是不是你想要的呢？

代碼如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="www.w3.org/1999/xhtml">
<head>
<title>CSS左圖右文混排布局</title>
<meta http-equiv="content-Type" content="text/html;charset=utf-8">
<style type="text/css">
* {
 margin:0;
 padding:0;
}
h4 {
 font-size:12px;
 color:#0066CC;
 line-height:2em;
}
p {
 font-size:12px;
 text-indent:2em;
 line-height:1.5em;
}
#container {
 width:300px;
 margin:0 auto;
 margin-top:10px;
 padding-right:3px;
 border:1px dotted #666;
 position:relative;
}
#leftContent {
 position:absolute;
 top:4px;
 left:4px;
}
#leftContent img{
 height:80px;
    width:100px;
 border:1px solid #ccc;
 padding:2px;
}
#rightContent {
 margin-left:120px;
}
</style>
</head>
<body>
<div id="container">
  <div id="leftContent"><img src="//img.jbzj.com/file_images/article/201505/2015513172559452.jpg"></div>
    <div id="rightContent">
      <h4><a href="#">十年朋友，一生財(cái)富</a></h4>
      <p>十年之間，我不認(rèn)識(shí)你，你不屬于我，走過漸漸熟悉的街頭，十年之后，我們是朋友，還可以問候，只是再也找不到。。。</p>
    </div>
  </div>
</div>
</body>
</html>

到此，相信大家對(duì)“CSS怎么實(shí)現(xiàn)左圖右文混排布局”有了更深的了解，不妨來實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

css
AI
助
手