-1

このコードがわかりません。

これが私のウェブサイトです：http：//claireisabelwebb.com/

左側のメインナビゲーションの周りにラッパーを作成し、右側に写真とテキストを含めました。テキスト/写真のコンテナに2つの「ボックス」があります。そのコードは次のとおりです。

/* Wrapper for Text and Photo on Home Page */

.wrapper_text_photo{ 
        display:block;
        float: left;
        background: rgba(0,0,255, .8);
        width:800px;
        height: 700px;
        padding: 20px;
        margin-top:20px;
        margin-left:10px;
}

/* Photo on Home Page */

.photo_home {
        float: left;
        margin-right:10px;
}

/* Text on Home Page */

.home_text{ 
        display:block;
        background: rgba(255,255,255,.75);
        width:800px;
        height: 400px;
}

これがhtmlです：

<div class="wrapper_text_photo">

<!-- Picture of Me __________________________________________-->

    <img class="photo_home" src="images/Home/claire-ed.jpg" alt="claire isabel webb" height="200px">

<!-- Text ___________________________________________________-->

    <div class="home_text">
            <p>I graduated in 2010 from Vassar College with departmental honors in astronomy. I also minored in philosophy and discovered a late interest in architecture and art history. ETC
            <br><br>
            Email me at claire.isabel.webb@gmail.com.
            <br> 
            </p>
    </div>
</div>

テキストボックスを画像に合わせたいのですが、パディングとマージンをいくら操作しても、正しく表示されないようです。

ありがとう ！

4

4 に答える 4

2

段落の暗黙のマージンが押し下げhome_textられています。余白を削除します。

.home_text p {
    margin: 0;
}
于 2013-03-14T01:32:35.537 に答える
1

追加：

p {
margin: 0;
}

「テキストボックス」には19pxの上/下マージンがあります。追加margin: 0;すると、上/右/下/左の値が0に設定されます。

于 2013-03-14T01:35:02.527 に答える
0

私があなたが望むものを理解しているなら、それに対処する1つの方法は、あなたのテキストを含むdiv内にあなたの画像を移動することです：

<div class="wrapper_text_photo">
  <div class="home_text">
    <img class="photo_home" src="images/Home/claire-ed.jpg" alt="claire isabel webb" height="200px">
    <p>I graduated in 2010 from Vassar College with departmental honors in astronomy. I also minored in philosophy and discovered a late interest in architecture and art history. ETC
    ...
  </div>
</div>

wrapper_text_photoそれはおそらく、とhome_textdivのどちらか一方を不要にするでしょう。

于 2013-03-14T01:42:48.767 に答える
-1

これを試してみてください多分それは助けになります

html

<div class="wrapper_text_photo">
    <div class="home_text">
            <p><img class="photo_home" src="images/Home/claire-ed.jpg" alt="claire isabel webb" height="200px" />I graduated in 2010 from Vassar College with departmental honors in astronomy. I also minored in philosophy and discovered a late interest in architecture and art history. ETC
            <br><br>
            Email me at claire.isabel.webb@gmail.com.
            <br> 
            </p>
    </div>
</div>

css

.home_text p img {
    float:left;
}

作業デモ

于 2013-03-14T01:36:35.040 に答える