html – 两个div中的段落对齐,它们之间有一个图像

如何对齐我的段落,如下图所示

.

我需要展示一种报纸应该包括在内的东西.

以下是我正在使用的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>

所有这一切,当然,考虑到您对所有尺寸进行硬编码.