在一个div 里面有左边图片左偏边下方是文字,右边是文字怎么布局,像图片这样的布局怎么布局,求解

 我来答
dfgerw6
2014-03-03
知道答主
回答量:76
采纳率:0%
帮助的人:23.9万
展开全部
这样的布局你可以从大往小看,首先你看这个整体,分析这几个的样式之后,你发现是分左右两个部分的,所以你就再下一级里放两个div,设置左浮动,就会横排并列,然后分析左面的,是分上下两个部分,然后写一个img一个p就可以搞定,右边的话是几个超链接,那你直接写a标签也可以,用span包住也可以,然后微调一下就能解决了
追问
能写下代码让我参考下吗?
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
lp5276159be1
2014-03-03 · TA获得超过2万个赞
知道大有可为答主
回答量:1万
采纳率:39%
帮助的人:4292万
展开全部
就拿知识那一块为例,图标与知识放在一个div内,右边的文字连再放在一个div内,之前2个div是平级的,都设定好宽度左浮动,然后再再里面做细分就行了
其实div+css有点像我们小时候玩的俄罗斯方块积木,这需要我们发挥想象来排列div的组合方式
追问
高手求解,那代码怎么写
追答
<style type="text/css">
.box01{ float:left; width:40px; height:60px;}
.icon01{ width:40px; height:40px; text-align:center; font:14px/40px '宋体'; color:white; background:#f64269;}
.icon01_font{text-align:center; font:bold  14px/20px '宋体'; color:#f64269;}
.box02{float:left; width:130px; height:60px; margin-right:70px;}
.box02_font{text-decoration:none; font:12px/20px '宋体'; color:black; margin-left:5px; white-space:nowrap;}
</style>
</head>

<body>
 <div class="box01">
  <div class="icon01">图标</div>
  <div class="icon01_font">知识</div>
 </div>
 <div class="box02">
  <a href="#" class="box02_font">装修知识</a>
  <a href="#" class="box02_font">装修风水</a>
  <a href="#" class="box02_font">装修流程</a>
 </div>
 <div class="box01">
  <div class="icon01">图标</div>
  <div class="icon01_font">房子</div>
 </div>
 <div class="box02">
  <a href="#" class="box02_font">儿童房</a>
  <a href="#" class="box02_font">书房</a>
  <a href="#" class="box02_font">卫生间</a>
  <a href="#" class="box02_font">厨房</a>
</div>
</body>

大概写了一个例子,你应该能看懂的

本回答被提问者采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
管小洁G
2014-03-03 · 超过25用户采纳过TA的回答
知道答主
回答量:123
采纳率:0%
帮助的人:65.2万
展开全部
这也可以有ul li的啊 只要图标不是点动的啊 设成背景图标也可以的啊 字再首行缩进就好 li再设成左浮动 设定要ul的宽度就好 省了成多代码
追问
能详细写些代码吗?让我参考下
追答
我自己写的代码中的一段你参考下:

试题下载
主题贴数:12
版主:admini
版块创建时间:2012-4-25 16:19:00

CSS:ul{ height:100px;color:#000; background:url(../Images/Logo2.png) no-repeat #FFF 10px 25px; text-indent:130px;}应该能看明天白吧 你要用话给li加浮动 这样旁边的字可以横排
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 更多回答(1)
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式