Question

我有一个双语页面，基本上是两列，左边是英文文本，右边是法文。 CSS的内容如下：

div.ltext
{
margin: 10px 30px 0 60px;
line-height: 130%; 
width:390px;
font-size:10pt; 
font-weight:normal;
text-align:justify;
overflow:hidden;
float:left;
}

div.rtext
{
margin: 10px 60px 0 30px;
padding-left:30px;
line-height: 130%;
width:390px;
font-size:10pt; 
font-weight:normal;
text-align:justify;
overflow:hidden;  
}

每隔一段时间，文字就会散布一个图像（居中）。图像的CSS如下：

.pic
{
width:390px;
margin: 10px auto 10px auto;
}

HTML看起来像这样：

<div class="ltext"><p>This grouping...</p></div>
<div class="rtext"><p><i>Cette plantation...</i> </p></div>
<div class="pic"><a onclick="loadImage('gdCG2013Jan05.jpg')" href="#4">
     <imgwidth="390" border="0" src="gdCG2013Jan05tn.jpg"></img></a></div>
<div class="ltext"><p>Next,... </p></div>
<div class="rtext"><p><i>Suivant...</i> </p></div>

问题在于，无论何时插入图像分割（.pic），以下文本块都不对齐（右侧的法语文本大约比英语高一行。如果我删除图像，那么是两个连续的双语文本块，如下所示：

<div class="ltext"><p>This grouping...</p></div>
<div class="rtext"><p>Cette plantation...</p></div>
<! div class="pic"> removed
<div class="ltext"><p>Next...</p></div>
<div class="rtext"><p>Suivant deux...</p></div>

第二组块的对齐是正确的。如果我在图像分割和下面的文本分割之间插入1像素高的虚拟间隔分割，则问题也得到纠正，因此：

.spacer {width:960px; height:1px; }
<div class="pic"> etc..</div>
<div class="spacer"> </div> 
<div class="ltext"> etc... </div>
<div class="rtext"> etc. </div>

这最后一个简单的解决方法，但我想知道这里出了什么问题。（顺便说一句，将以下文本块包含在包装器分区中并不能解决问题。）

Answer 1

为您不想移动的div创建一个容器。

<div>
    <div class="ltext"><p>This grouping...</p></div>
    <div class="rtext"><p><i>Cette plantation...</i> </p></div>
</div>
<div class="pic"><a onclick="loadImage('gdCG2013Jan05.jpg')" href="#4">
<img width="390" border="0" src="gdCG2013Jan05tn.jpg"></img></a></div>
<div>
    <div class="ltext"><p>Next,... </p></div>
    <div class="rtext"><p><i>Suivant...</i> </p></div>
</div>

您的JSFiddle示例没有任何图像，但我想您所说的问题是出现的其他元素正在移动已存在的元素。

对齐错误

1 个答案: