如何对齐我的段落,如下图所示
.
我需要展示一种报纸应该包括在内的东西.
以下是我正在使用的HTML代码
<div class="left"></div> <div class="right"></div> <div class="myImage"><img src="question.png"/></div>
而css代码就是这个
*{ margin:0; padding:0; } .right,.left{ height:300px; width:200px; float:left; background:red; margin:5px; } .myImage img{ width:100px; height:100px; } .myImage{ clear:both; position:absolute; top:100px; left:150px; }
解决方法
在左侧创建图像元素,浮动到文本的右侧.将它错位到右边,图像宽度的一半带有“边距”.然后,在右侧div上,使用空白div创建相同的效果,但是反转.将div浮动到文本的左侧,并将其放错到左侧宽度的一半.像这样:
<style> .right,.left { width: 200px; height: 300px; float:left; } #real-img { width: 100px; height: 100px; float: right; margin-right: -50px; /* half the width */ margin-top: 125px; /* vertical align considering page height minus img half height */ } #fake-img { width:100px; height:100px; float:left; margin-left: -50px; margin-top: 125px; } </style>
和HTML:
<div class="left"> <img src="imgurl" id="real-img" /> [CONTENT_TEXT] </div> <div class="right"> <div id="fake-img"></div> [CONTENT_TEXT] </div>
所有这一切,当然,考虑到您对所有尺寸进行硬编码.