0

私は自分のテキストが現在行っていることを行う方法を見つけることしかできませんでした。それを妨げないでください。画像の下にテキストを折り返さないようにします。しかし、私は固定幅を使用することはできません。ページのサイズが変更されたときに、テキストは同じ列に続く必要があります。

http://jsfiddle.net/avHcA/

    <div id="apDiv1">
    <div id="apDiv2">
    <strong>image goes here</strong>
    </div>
    <div id="apDiv3" ><p><strong>Name Goes here in div with main text</strong></p>
    <p>text that I want to stay in its it div and not wrap underneath the 
    image goes here</p></div></div>
4

2 に答える 2

0

これを行う最良の方法は、テーブルを使用することです。http://jsfiddle.net/YymYF/

divを独自のテーブルセルにコピーしました

<table>
    <tr>
    <td>
        <strong><a href="http://climatemaryland.org/wp-content/uploads/2013/01/Casciani_Cheryl.jpg"><img class="alignleft  wp-image-131" style="border: 0px none;" alt="" src="http://climatemaryland.org/wp-content/uploads/2013/01/Casciani_Cheryl.jpg" width="166" /></a></strong>
    </td>
    <td>
        <p><strong>Cheryl Casciani</strong></p>
        <p>Cheryl Casciani is the Director of Neighborhood Sustainability for the
        Baltimore Community Foundation (BCF) where she is responsible for management
        of a range of initiatives aimed at strengthening Baltimore neighborhoods
        and making Baltimore a more sustainable city. Cheryl also serves as the
        Chair of the Baltimore Commission on Sustainability, which was created
        in 2008 and charged with developing and monitoring the implementation of
        Baltimore's Sustainability Plan. She has a Master's in Public and Private
        Management from the Yale School of Management and a Bachelors of Science
        in Economics and Bachelors of Applied Science from the University of Pennsylvania.</p>
    </td>
    </tr>

テーブルのプロパティをいじって、より魅力的に見えるようにします。

于 2013-02-18T04:22:30.350 に答える
0

以下のように、パーセンテージ幅を使用する場合：

#apDiv2 {
    float: left;
    padding-right: 2%;
    width: 38%;
    z-index: 2;
}


#apDiv3 {
    float: left;
    width: 60%;
    z-index: 3;
}

そうすれば、ウィンドウのサイズが変更されても、テキストは同じ列に続きます。＃apDiv1ごとにフロートをクリアしてください。フロートをクリアするに<div class="clear"></div>は、clearクラスのcssが次のようになっている場所を追加します。

.clear { clear: both; }
于 2013-02-18T04:30:07.470 に答える