问题:

I'm echoing out a few images which all works fine but my problem is they are all going down the page example

image 1

image 2

image 3

and I'd like to make them so they sit next to each other like so

image 1 image 2 image 3

and so on. I have tried to add inline into the CSS for my div tag but it does not work...

                                <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>';

You can see that the div is called auction_box. I have tried a lot of things in CSS but has not worked... I'd like them all next to each other.

Has you can see the image is this part

   <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;">

I'd like the whole echo ( e.g the levels has well has the pic ) to be inline.

回答1:

Use style float:left to container where that images are placed like

<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>

回答2:

Make width's whatever you want as long as the children fit within the parent. (border's & padding will count against width.)

jsFiddle DEMO

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; }

转载请标明出处:aligning my images so they sit next to each other

文章来源: aligning my images so they sit next to each other

标签

sit