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

Posted 2023-03-05

【中文标题】两个div中的段落对齐，它们之间有一个图像

【英文标题】：Paragraph alignment in two divs with an image between them

【发布时间】：2014-01-26 06:00:45

【问题描述】：

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

。

我需要展示一种应该包含在报纸上的东西。

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

【问题讨论】：

请发布一些代码或jsfiddle.net

快速回答是“是”。

是否可以将左侧部分分为三个 div，将右侧部分分为三个不同的 div。这样就变得容易了，但我不确定这是否是您要找的！

有人在这里做了类似的事情：css-tricks.com/float-center。它基本上涉及浮动的空元素。你必须知道你的图像的宽度。看看它并对其进行逆向工程。

太棒了..thanx @CubicleDragon

【参考方案1】：

在左侧创建图像元素，浮动到文本的右侧。将它错放在右边，图像宽度的一半，带有“边距”。然后，在右侧的 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>

当然，考虑到您对所有尺寸都进行了硬编码。