CSS编辑:怎么样才能使右边的列表上下水平对齐?左边的图片上下空一定的距离?(具体看图)谢谢!

silviasun0423 2013-02-20 12:05:22



希望能把怎么编辑的具体内容写一下撒!
...全文
200 7 点赞 打赏 收藏 举报
写回复
7 条回复
切换为时间正序
当前发帖距今超过3年,不再开放新的回复
发表回复
victor_woo 2013-07-18
你这个如果使用TABLE根本不是问题 但是你也没有说你用的是哪种
  • 打赏
  • 举报
回复
小游 2013-07-18
图片上下间距 设置margin 。 你li的宽度没定义。
  • 打赏
  • 举报
回复
小游 2013-07-18
可以用浮动和定位或者缩进吧
  • 打赏
  • 举报
回复
弘毅致远 2013-07-18
看效果,直接复制过去修改吧。

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<style type="text/css">
.wrap{margin:0 auto;width:960px;}
.wrap .main{ background-color:#66cbff;height:680px;}
ul {padding:0px;list-style:none;}
ul li{margin:3px;height:220px; border:1px solid yellow;}
.contentBlock{maring:3px;}
.contentBlockImg{float:left;width:300px;}
.contentBlockImg img{width:300px;height:210px;}
.contentBlock .imgDscript{float:left;width:600px;margin-left:8px;}
.contentBlock .imgDscript  .dscript{margin-left:8px;}

</style>
</head>
<body>
<div class="wrap">
<div class="main">
 <ul>
   <li>
	<div class="contentBlock">
		<div class="contentBlockImg">
		<img src="http://d.hiphotos.bdimg.com/album/w%3D2048/sign=1377d5dffaf2b211e42e824efeb86438/8435e5dde71190ef75892173cf1b9d16fdfa602f.jpg" width="300px;" height="210px;" />
		</div>
		<div class="imgDscript">
			<p><b>Image name</b><br /><span class="dscript">Image nameImage nameImage nameImage name</span></p>
			<p><b>Image author</b><br /><span class="dscript">Image authorImage authorImage authorImage authorImage authorImage authorImage authorImage authorImage authorImage authorImage authorImage author</span></p>
			<p><b>Image url</b><br /><span class="dscript">Image authorImage authorImage authorImage authorImage authorImage authorImage authorImage authorImage author</span></p>
		</div>
	</div>
   </li>
   <li>
	<div class="contentBlock">
		<div class="contentBlockImg">
		<img src="http://g.hiphotos.baidu.com/album/w%3D2048/sign=3a9cfe7532fa828bd1239ae3c9274034/d31b0ef41bd5ad6e5b661e9a80cb39dbb6fd3c26.jpg" width="300px;" height="210px;" />
		</div>
		<div class="imgDscript">
			<p><b>Image name</b><br /><span class="dscript">Image nameImage nameImage nameImage name</span></p>
			<p><b>Image author</b><br /><span class="dscript">Image authorImage authorImage authorImage authorImage authorImage authorImage authorImage authorImage authorImage authorImage authorImage author</span></p>
			<p><b>Image url</b><br /><span class="dscript">Image authorImage authorImage authorImage authorImage authorImage authorImage authorImage authorImage author</span></p>
		</div>
	</div>
   </li>
   <li>
	<div class="contentBlock">
		<div class="contentBlockImg">
		<img src="http://d.hiphotos.bdimg.com/album/w%3D2048/sign=1377d5dffaf2b211e42e824efeb86438/8435e5dde71190ef75892173cf1b9d16fdfa602f.jpg" width="300px;" height="210px;" />
		</div>
		<div class="imgDscript">
			<p><b>Image name</b><br /><span class="dscript">Image nameImage nameImage nameImage name</span></p>
			<p><b>Image author</b><br /><span class="dscript">Image authorImage authorImage authorImage authorImage authorImage authorImage authorImage authorImage authorImage authorImage authorImage author</span></p>
			<p><b>Image url</b><br /><span class="dscript">Image authorImage authorImage authorImage authorImage authorImage authorImage authorImage authorImage author</span></p>
		</div>
	</div>
   </li>
 </ul>
</div>
</div>
</body>
</html>
  • 打赏
  • 举报
回复
YY从零开始 2013-07-18
使用浮动就行了吧
  • 打赏
  • 举报
回复
打字员 2013-02-20
你要的效果圖呢,你帖出來的不是最終想要的效果圖吧?
  • 打赏
  • 举报
回复
bbjbepzz 2013-02-20
LZ贴代码吧
  • 打赏
  • 举报
回复
相关推荐
发帖
CSS
加入

6.0w+

社区成员

层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
申请成为版主
帖子事件
创建了帖子
2013-02-20 12:05
社区公告
暂无公告