用文字对齐图像

我把左边的金发男人的照片与右边的文字对齐。用文字对齐图像

但我不能获得与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>

来源

2012-08-16 João Paulo

请不要让我们诉诸<查看页面源代码>。换句话说，你可以发布你使用的标记吗？ – bobbiloo 2012-08-16 19:37:46

需要采取的措施。编辑该问题。 – 2012-08-16 19:40:12

这里有一个工作示例：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>

希望这有助于！

来源

2012-08-16 19:55:45 Cynthia

无法得到它的工作辛西亚：http://www.joaoalexandre.com/wordpressteste/clinica/corpo-clinico/ – 2012-08-16 20:03:19

那是因为您的网站上实际的代码是不是都像你给作为示例代码。 – Cynthia 2012-08-16 20:05:20

我将你的代码添加到CSS和标记。也许我错过了什么？ – 2012-08-16 20:07:25

你必须改变结构一点点，如果能够愉悦你

<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-16 19:41:20 GLES

如果我编辑CSS，其他页面也会改变吗？我只需要在此页右侧的左侧资格图片。 – 2012-08-16 19:46:58

你使用相同的CSS为另一个页面？ – GLES 2012-08-16 19:48:43

我的CSS文件是用于整个WordPress的安装。我没有任何特定的CSS页面。我只是按照需要为每个页面编辑标记。这是你问的吗？ – 2012-08-16 19:49:23

感谢编辑...

我尼娜同意在这里。我肯定会修改你的加价纳入和控制与CSS，而不是内联样式。

来源

2012-08-16 19:44:43 bobbiloo

谢谢你的建议。 – 2012-08-16 20:16:36

通过给的298px一个固定的宽度，以内含div您迫使元件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>

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

来源

2012-08-16 20:04:30 Shahar

谢谢你的努力Shahar。 – 2012-08-16 20:15:57

用文字对齐图像

回答

相关问题