div左图右文布局效果收藏

最新推荐文章于 2024-05-15 23:55:16 发布

原创最新推荐文章于 2024-05-15 23:55:16 发布 · 801 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#XHTML #HTML

extjs 专栏收录该内容

36 篇文章

订阅专栏

本文介绍了一种常见的网页布局方式——DIV左图右文布局，并提供了完整的HTML与CSS代码示例。通过该示例可以了解到如何使用定位属性实现图片与文字的并排显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

div左图右文布局效果收藏
<!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>中国站长天空-网页特效-状态标题-标题栏上的倒计时</title>
<meta http-equiv="content-Type" content="text/html;charset=gb2312">

<style type="text/css">
* {
margin:0;
padding:0;
}
img {
height:100px;
width:100px;
border:1px solid #ccc;
padding:2px;
}
h3 {
font-size:12px;
color:#09c;
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;
}
#rightContent {
margin-left:120px;
}
</style>
</head>
<body>

<div id="container">
<div id="leftContent"><img src="http://www.zzsky.cn/effect/images/200810130850.gif"></div>
<div id="rightContent">
<h3>畅游五寨沟</h3>
<p>醉江月酒店地处珞狮路，招牌菜脆皮蒜香鸡38元/份，此菜关键在选料上，采用了当年的童子鸡，突出蒜香味，分外诱人。鸡皮脆而肉鲜，菜式比较诱人，稍有些腻。</p>
</div>
</div>
</div>
</body>
</html>