用文字對齊圖像

我把左邊的金髮男人的照片與右邊的文字對齊。用文字對齊圖像

但我不能獲得與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

用文字對齊圖像

回答

相關問題