3

私はすべてうまくいくいくつかの画像をエコーアウトしていますが、私の問題はそれらがすべてページの例の下にあることです

画像1

画像2

画像3

そして、私はそれらを作りたいので、それらはそのように隣り合って座ります

画像1画像2画像3

等々。タグのCSSにインラインを追加しようとしましたdivが、機能しません...

                                <div class="auction_box" style="height:150px">

                                <form name="myform" action="userbox.php" method="POST">
                                <p> </p>
                                <p> </p>
                                <p> </p>






    <p align="center"><a href="smalldex.php?name='.$battle_get['name'].'"?KeepThis=true&amp;TB_iframe=true&amp;height=400&amp;width=600" class="thickbox"><img src="http://pokemontoxic.net/img/pokemon/'.$v->type.''.$battle_get['pic'].'" width="" height="" border="0" /></a></p>
      <p align="center"><span style="height: 70px; text-align: center;">





                                    Name:<br/>' .$v->pokemon. '<br/>
                                    Level:' .$v->level. '<br/>
                                    Exp:' .$v->exp. '<br/>
                                    Gender:' .$v->gender. '<br/>
                                    Type:' .$v->type. '<br/>

    Slot you want to put your pokemon in


<select name="mydropdown">

<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>


<input type="hidden" name="myName" value="'.$v->id.'" />
                                <input type="submit" value="submit" name="submit"> 



                                </form>
                                </div>';

divがと呼ばれていることがわかりますauction_box。私はCSSで多くのことを試しましたが、うまくいきませんでした...それらをすべて並べてほしいです。

画像はこの部分であることがわかりますか

   <p align="center"><a href="smalldex.php?name='.$battle_get['name'].'"?KeepThis=true&amp;TB_iframe=true&amp;height=400&amp;width=600" class="thickbox"><img src="http://pokemontoxic.net/img/pokemon/'.$v->type.''.$battle_get['pic'].'" width="" height="" border="0" /></a></p>
      <p align="center"><span style="height: 70px; text-align: center;">

エコー全体（たとえば、レベルには写真があります）をインラインにします。

4

2 に答える 2

4

その画像が次のように配置されるコンテナにスタイルfloat：leftを使用します

<div style="width:500 px">
<div style="float:left; width:100 px">Image 1</div>
<div style="float:left; width:100 px">Image 2</div>
<div style="float:left; width:100 px">Image 3</div>

<div style="clear:both"></div>
</div>
于 2012-06-10T13:45:17.800 に答える
3

width子が親に収まる限り、何でも好きなように作成してください。(borderの &paddingは に対してカウントされますwidth。)

jsFiddle デモ

HTML

<div id="parent">
    <div class="image">Image 1</div>
    <div class="image">Image 2</div>
    <div class="image">Image 3</div>

    <div style="clear:both"></div>
</div>

CSS:

#parent {
    width: 900px;
}

.image {
    float: left;
    width: 300px;
}
于 2012-06-10T14:05:08.533 に答える