Đặt các phần tử trên cùng một dòng

Question

Làm cách nào để tôi có thể đặt các thành phần sau trên cùng một dòng? Tôi biết nó phải làm với tài sản hiển thị, nhưng đó là một trong đó luôn luôn stumps tôi và không bao giờ có thể có vẻ để có được để làm việc.

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

Cảm ơn. :)

Answer 1

You could use float: left or float: right

img {float: left;} 

Lưu ý, bạn sẽ phải sử dụng clearfix mà ông Gallagher giải thích độc đáo hoặc làm theo với bất kỳ phần tử có clear: both; vào nó để có được kết quả bạn mong đợi.

Bạn có thể đặt chúng hoàn toàn

img {position: absolute;} 

và sau đó vị trí từng người một bằng left và right hoặc lề

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

EDIT: đã không chú ý đến các div, bạn nên đặt phao còn lại trên những người như một người khác được đề cập, tuy nhiên cả hai lựa chọn kỹ thuật làm việc trong trường hợp của bạn. hơn Theres lẽ một chục cách để làm điều này ...

Answer 2

Thay đổi display:block thành display:inline-block trong quy tắc .thumbnail-last của bạn sẽ làm điều đó.

Answer 3

thử float: left trên các div. Điều đó sẽ khiến mọi người xuất hiện trong hàng. yếu tố khối khôn ngoan khác giới thiệu một break

Answer 4

Hãy thử mã này: - Chỉ sử dụng 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> 

Tất cả các mã của bạn là ok. Nhưng, tôi chỉ thêm style trong phần HTML.

Cập nhật liên kết: -

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

của nó làm việc tốt.

Answer 5

Đó là một bài đăng cũ nhưng nó cames khi tìm kiếm các yếu tố địa điểm trên cùng một dòng với bootstrap vì vậy tôi sẽ giúp đỡ người khác.
Boostrap có lớp biểu mẫu Inline để đặt một số thành phần trên cùng một dòng (được căn trái).
Bootstrap CSS inline form