Html 对齐我的图像，使它们彼此相邻

aligning my images so they sit next to each other

提问by user1405062

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

图 1

image 2

图 2

image 3

图 3

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

我想让它们像这样坐在一起

image 1 image 2 image 3

图1 图2 图3

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

等等。我试图将内联添加到我的div标签的 CSS 中，但它不起作用......

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

你可以看到div被称为auction_box。我在 CSS 中尝试了很多东西，但都没有奏效……我希望它们彼此相邻。

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.

我希望整个回声（例如级别有很好的图片）是内联的。

回答by vikrantx

Use style float:leftto container where that images are placed like

使用样式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>

回答by Sparky

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

制作width的任何你想要的，只要孩子适应父之内。( border's &padding将计入width.)

jsFiddle DEMO

jsFiddle 演示

HTML

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:

CSS：

#parent {
    width: 900px;
}

.image {
    float: left;
    width: 300px;
}