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:both3 番目に追加した方法を参照してください<p></p>。これにより、次の行に強制的に移動され、その<p></p>横にある 4 番目の行がフロートされます。

margin-bottom:20pxまた、最初の段落の画像に追加して、最初の行と 2 番目の行の間にスペースを入れました。

ただし、次のように、外部スタイルシートで 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

ブロック要素 (p や div など) がこのように動作するため、含まれている div にの固定幅を与えることによって、の後の要素をその下にドロップする298pxように強制します。まず、この div からプロパティと値を削除します。<p>imgwidth

<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 に答える
0

編集ありがとう…

私はここでニーナに同意します。インライン スタイルではなく、CSS を組み込んで制御するようにマークアップを間違いなく修正します。

于 2012-08-16T19:44:43.520 に答える