9

How can I put the following elements on the same line? I know it has to do with the display property, but that's the one that always stumps me and can never seem to get to work.

http://jsfiddle.net/MgcDU/4137/

HTML:

<div class="container">
  <div class="small-video-section">
    <div class="thumbnail-container">
      <img src="http://i2.ytimg.com/vi/yKWoPlL2B8I/mqdefault.jpg" width="220" />
    </div>
    <div class="thumbnail-container">
      <img src="http://i2.ytimg.com/vi/yKWoPlL2B8I/mqdefault.jpg" width="220" />
    </div>
    <div class="thumbnail-container">
      <img src="http://i2.ytimg.com/vi/yKWoPlL2B8I/mqdefault.jpg" width="220" />
    </div>
    <div class="thumbnail-last">
      <img src="http://i2.ytimg.com/vi/yKWoPlL2B8I/mqdefault.jpg" width="220" />
    </div>
  </div>
</div>

CSS:

.small-video-section {
  height: 134px;
}

.thumbnail-container {
  width: 220px;
  margin-top: 15px;
  margin-right: 20px;
  display: inline-block;
}

.thumbnail-last {
  width: 220px;
  margin-top: 15px;
  display: block;
}

Thanks. :)

4

5 回答 5

7

You could use float: left or float: right

img {float: left;}

Note, you'll have to use clearfix which Mr Gallagher explains nicely or follow with any element that has clear: both; on it to get the results you expect.

You can position them absolutely

img {position: absolute;}

and then position one by one using left and right or margins

img.image-one {left: 0: top: 0;}
img.image-one {right: 300px; top: 0;}
img.image-three {margin-left: 100px;}
/*etc etc...*/

EDIT: didn't notice the divs, you should put float left on those as someone else mentioned, however both options technically work in your case. Theres probably a dozen more ways to do this...

于 2013-05-11T03:10:41.413 回答
3

Changing display:block to display:inline-block in your .thumbnail-last rule will do it.

于 2013-05-11T03:06:54.540 回答
0

try float: left on the divs. That will get everyone to show up in line. other wise block elements introduce a break

于 2013-05-11T03:07:04.870 回答
0

Try this code :- Use only float:left 

<div class="container">
      <div class="small-video-section">
        <div class="thumbnail-container"  style="float:left;height:134px;width:150px">
          <img src="http://i2.ytimg.com/vi/yKWoPlL2B8I/mqdefault.jpg" width="150" />
        </div>
        <div class="thumbnail-container" style="float:left;height:134px;width:150px">
          <img src="http://i2.ytimg.com/vi/yKWoPlL2B8I/mqdefault.jpg" width="150" />
        </div>
        <div class="thumbnail-container" style="float:left;height:134px;width:150px">
          <img src="http://i2.ytimg.com/vi/yKWoPlL2B8I/mqdefault.jpg" width="150" />
        </div>
        <div class="thumbnail-last" style="float:left;height:134px;width:150px">
          <img src="http://i2.ytimg.com/vi/yKWoPlL2B8I/mqdefault.jpg" width="150" />
        </div>
      </div>
    </div>

All your code are ok. But , I have only added style in HTML part.

Update link :-

http://jsfiddle.net/MgcDU/4148/

Its working fine.

于 2013-05-11T03:11:36.920 回答
0

It's an old post but it cames when searching for place elements on the same line with bootstrap so I will help others.
Boostrap has the Inline form class to place some elements on the same line (it's left aligned).
Bootstrap CSS inline form

于 2016-05-29T19:19:53.360 回答