Umieszczanie elementów na tej samej linii

Question

Jak umieścić następujące elementy na tej samej linii? Wiem, że ma to związek z ekspozycją, ale to ta, która zawsze mnie kłuje i nigdy nie może dostać się do pracy.

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

Dzięki. :)

Answer 1

You could use float: left or float: right

img {float: left;} 

Uwaga, będziesz musiał użyć clearfix którym Pan Gallagher wyjaśnia ładnie lub śledzić z dowolnego elementu, który ma clear: both; na to, aby uzyskać oczekiwane rezultaty.

Można umieścić je absolutnie

img {position: absolute;} 

a następnie umieść jeden po drugim używając left i right lub marginesy

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

EDIT: Nie zauważyłem DIV, należy umieścić na lewy pływak te, o których wspomniał ktoś inny, jednak obie opcje sprawdziły się technicznie w twoim przypadku. Tam prawdopodobnie kilkanaście innych sposobów, aby to zrobić ...

Answer 2

Zmiana display:block na display:inline-block w twojej regule .thumbnail-last to zrobi.

Answer 3

spróbuj float: left na divs. To sprawi, że wszyscy pojawią się w kolejce. inne mądre elementy blokowe wprowadzić przerwę

Answer 4

wypróbować ten kod: - Stosować wyłącznie 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 kodu są w porządku. Ale dodałem tylko style w części HTML.

Link Aktualizacja: -

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

grzywny pracy.

Answer 5

To stary post, ale jest przy wyszukiwaniu elementów miejsca na tej samej linii z bootstrapem, więc pomogę innym.
Boostrap ma klasę formularza Inline, która umieszcza niektóre elementy w tym samym wierszu (wyrównane do lewej).
Bootstrap CSS inline form