1

我已将左侧金发男子的图片与右侧的文字对齐。

但我无法让拿着 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>
4

4 回答 4

2

这是一个工作示例：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到第三个的<p></p>？这迫使它下降到下一行，然后将第四行浮动到<p></p>它旁边。

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>​

希望这可以帮助！

于 2012-08-16T19:55:45.480 回答
1

如果你愿意的话，你必须稍微改变一下结构

<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>
于 2012-08-16T19:41:20.527 回答
0

感谢编辑...

我同意尼娜的观点。我肯定会修改您的标记以合并和控制 CSS，而不是内联样式。

于 2012-08-16T19:44:43.520 回答
0

通过为包含的 div 提供固定宽度，298px您将强制<p>之后的元素img放在它下面，因为块元素（如 p 和 div）以这种方式运行。width首先，从此 div中删除属性和值：

<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>

这只是一个例子，但想法应该很清楚。

于 2012-08-16T20:04:30.747 回答