我怎样才能对齐我的段落,如下图所示
.
我需要展示一份报纸之类的东西,其中应该包含此内容。
以下是我正在使用的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>
当然,考虑到您对所有尺寸进行了硬编码,所有这些都是如此。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)