Question

我已经将左边的金发男人的照片和右边的文字对齐了。

但我不能让那个带X光的女孩与右边的文字对齐（目前在她下方）。

你是怎么做到的？

http://www.joaoalexandre.com/wordpressteste/clinica/corpo-clinico/

<p style="float: left;">IMAGE OF BLOND GUY</p>

<p style="float: right;">HIS QUALIFICATIONS</p>


<p style="float: left;">IMAGE OF X-RAY GIRL</p>

<p style="float: right;">HER QUALIFICATIONS</p>

Answer 1

以下是一个有效的例子：http://jsfiddle.net/5LqUB/

以下是您修改的代码：

<p style="float: left;">THE IMAGE</p>

<p style="float: right;">HIS QUALIFICATIONS</p>

<p style="clear:both ; float: left;">THE IMAGE</p>

<p style="float: right;">HER QUALIFICATIONS</p>

了解我如何将clear:both添加到第三个？这会迫使它下到下一行，然后在它旁边浮动第四个。

我还在第一段中为我的图片添加了margin-bottom:20px，只是为了在第一行和第二行之间放置一些空格。

但是，在外部样式表中创建CSS类将是更清晰的标记，如下所示：

.clear { clear:both }
.left { float:left }
.right { float:right }

然后让您的HTML看起来像这样：

<p class="left">THE IMAGE</p>

<p class="right">HIS QUALIFICATIONS</p>

<p class="clear left">THE IMAGE</p>

<p class="right">HER QUALIFICATIONS</p>

希望这有帮助！

Answer 2

如果可能会让你高兴的话，你必须稍微改变一下结构

<style>
  .container{
    display:block;
    height:400px;
    min-height:400px;
  }

  .photo{
    float:left;
  }
</style>

<div class="container"> 
  <div class="photo">guy</div>
  <div class="text">guy_text</div>
</div>

<div class="container">
  <div class="photo">gal</div>
  <div class="text">gal_text</div>
</div>

这也可以：

<style>
  .container{
    display:block;
    height:400px;
    min-height:400px;
  }

  .photo{
    float:left;
  }

  .text {
    margin-left:10px;
  }
</style>

<img class="photo" src="guy"/>
<div class="text"><p>guy_text</p></div>

Answer 3

感谢您的编辑...

我同意尼娜的意见。我肯定会修改你的标记，用CSS来整合和控制，而不是内联样式。

Answer 4

为包含div提供固定宽度298px您在下面强制img元素，因为块元素（如p和div）表现出来这条路。首先，从此div中删除width属性和值：

<div style="width: 289px" class="wp-caption aligncenter" id="attachment_498"><a href="http://pt.drpedrocoelho.com/wp-content/uploads/2012/08/dalilacosta.jpg"><img width="279" height="400" class="size-full wp-image-498" title="dalilacosta" alt="Dr.ª Dalila Costa" src="http://pt.drpedrocoelho.com/wp-content/uploads/2012/08/dalilacosta.jpg"></a><p class="wp-caption-text">Dr.ª Dalila Costa &ndash; Dental House Oeiras</p></div>

接下来，将您的第一个img和p包裹在一个单独的div中。在此之后，你应该以类似的方式添加下一个img，所以你会有这样的东西：

<div class="container">
   <img class="floatLeft" src="p1.jpg" />
   <p>some text here</p>
   <p>some text here</p>
</div>
<div class="container">
   <img class="floatLeft" src="p2.jpg" />
   <p>some text here</p>
   <p>some text here</p>
</div>


<style>
/* ClearFix */
.container:after { content:"."; line-height:0; visibility:hidden; clear:both; height:0; display:block; }

.container p { float:left; } 
.floatLeft { float:left; }
</style>

这只是一个例子，但这个想法应该是明确的。

将图像与文本对齐

4 个答案: