How to make the

前端未结

关注

 5  1171

清酒与你

I need to make the images show up side by side horizontally in the div. How can I do that?

HTML:

相关标签:

5条回答

孤城傲影

2020-12-06 13:34
On the general assumption of your code being something like this
```
<div>
    <img ... />
    <img ... />
    <img ... />
</div>
```
Then, a simple CSS property will get the job done.
```
div img { display: inline; }
```
On seeing your HTML portion. You can use the following CSS to get them online.
```
.partners img { display: inline; }
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
旧时难觅i

2020-12-06 13:35
now you can used to

Your default link is http://tinkerbin.com/ob9HFOA4

Css
```
   img{
   display: inline-block;
    vertical-align: top;
    }
```
live demo http://tinkerbin.com/a5BxIZrs
0 讨论(0)
发布评论:

提交评论
- 加载中...
小鲜肉

2020-12-06 13:42
Rather than using inline, which robs you of a lot of the control that comes with block elements, or changing their vertical align, I'd float them:
```
<html>
    <head>
        <style>
            div.img_holder img
            {
                float: left;
            }
        </style>
    </head>
    <body>
        <div class = "img_holder">
            <img src="" />
            <img src="" />
            <img src="" />
            <img src="" />
        </div>
    </body>
</html>
```
Floating is a peculiar science of its own in CSS; it's very much worth learning as it can yield some very powerful results. For example, were these divs, and not images, using inline would keep you from setting their height. Inline also affects how margins and padding work. vertical-align is inconsistent between browsers and, if I'm not mistaken, shouldn't actually yield the results you're looking for, at all.
0 讨论(0)
发布评论:

提交评论
- 加载中...
孤城傲影

2020-12-06 13:43
You could also use css properties display:inline-block or float : left to achieve this.

HTML Code
```
<div>
    <img ... />
    <img ... />
    <img ... />
</div>
```
CSS Code
```
div img{ display: inline-block;}
```
or
```
div img{ display: block;float: left;margin-right: 5px;}
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
傲寒

2020-12-06 13:43
Firts of all, in order not to mess up your other images you're probably going to add, do this:
```
.Wrapper img{ float: left; }
```
This will float all your images within the .Wrapper class to the left. If all images in the page where these css rules are called will be aligned to the left, do this:
```
.Wrapper img{ float: left; }
```
EDIT: Add this rule to .Wrapper
```
.Wrapper{ width: 100%; }
```
0 讨论(0)
发布评论:

提交评论
- 加载中...