div左图右文布局效果

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

fengkuanghun

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

阅读量5.3k

点赞数

分类专栏：通用技术文章标签： div border xhtml html c

本文链接：https://blog.csdn.net/fengkuanghun/article/details/3639011

版权

本文演示了如何在XHTML页面中实现一个经典的左图右文布局效果，通过CSS样式控制，创建了一个包含图片和文字的容器，其中图片位于左侧，文字在右侧，整体布局整洁且具有清晰的边界。具体实现包括设置图片大小、边框、内边距，以及调整文字对齐和段落样式。

摘要由CSDN通过智能技术生成

<!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;
   pa