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

silviasun0423 2013-02-20 12:05:22

希望能把怎么编辑的具体内容写一下撒!

...全文

232 7 打赏收藏转发到动态举报

写回复

用AI写文章

7 条回复

切换为时间正序

请发表友善的回复…

发表回复

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