Div cạnh nhau mà không cần phao nổi

Question

Làm thế nào tôi có thể làm cho div 'left' và 'right' trông giống như các cột cạnh nhau?

Tôi biết tôi có thể sử dụng phao: còn lại trên chúng và điều đó sẽ hoạt động ... nhưng trên bước 5 và 6 ở đây http://www.barelyfitz.com/screencast...s/positioning/ người đó nói điều đó là có thể, tôi không thể làm việc đó ...

Code:

<style> 
div.left { 
    background:blue; 
    height:200px; 
    width:300px; 
} 

div.right{ 
    background:green; 
    height:300px; 
    width:100px; 
} 

.container{ 
    background:black; 
    height:400px; 
    width:450px; 
} 
</style> 

<div class="container"> 
     <div class="left"> 
      LEFT 
     </div> 
     <div class="right"> 
      RIGHT 
     </div> 
</div> 

Answer 1

phương pháp thông thường khi không sử dụng float s là sử dụng display: inline-block: http://www.jsfiddle.net/zygnz/1/

.container div { 
    display: inline-block; 
} 

Do lưu ý những hạn chế của nó mặc dù: Có một không gian bổ sung sau khi khối đầu tiên - điều này là bởi vì hai khối bây giờ về cơ bản inline yếu tố, như a và em, vì vậy khoảng trắng giữa hai tội. Điều này có thể phá vỡ bố cục của bạn và/hoặc không đẹp, và tôi không muốn loại bỏ tất cả khoảng trống giữa các ký tự vì mục đích này.

Nổi cũng linh hoạt hơn, trong hầu hết các trường hợp.

Answer 2

Bạn có thể thử với lề cho div đúng

margin: -200px 0 0 350px; 

Answer 3

A div là block level element, có nghĩa là sẽ hoạt động như một khối và các khối không thể ở cạnh nhau mà không bị trôi nổi. Tuy nhiên bạn có thể đặt chúng vào inline elements với:

display:inline-block; 

Give it a try ...

---

Một cách khác là đặt chúng bằng cách sử:

position:absolute; 
left:0; 

và/hoặc

position:absolute; 
right:0; 

Lưu ý: Để làm việc này như mong đợi, phần tử bao bọc phải có position:relative; sao cho các phần tử có vị trí tuyệt đối giữ nguyên so với phần tử bao bọc của chúng.

Answer 4

Bạn cũng có thể sử dụng bố cục CSS3 flexbox, hiện tại là well supported.

.container { 
    display: flex; 
    flex-flow: row nowrap; 
    justify-content: space-between; 
    background:black; 
    height:400px; 
    width:450px; 
} 

.left { 
    flex: 0 0 300px; 
    background:blue; 
    height:200px; 
} 

.right { 
    flex: 0 1 100px; 
    background:green; 
    height:300px; 
} 

See Example (với phong cách di sản để tương thích tối đa) & Learn more về flexbox.

Answer 5

Tôi hiện đang làm việc với điều này và tôi đã có một số giải pháp. Thật tuyệt khi có một trang web chất lượng cao, mà tôi cũng có thể sử dụng để thuận tiện cho tôi. Bởi vì nếu bạn không viết những điều này xuống, cuối cùng bạn sẽ quên một số phần. Và tôi cũng có thể khuyên bạn nên viết một số cơ bản xuống nếu bạn đang bắt đầu bất kỳ loại lập trình/thiết kế mới.

Vì vậy, nếu các hàm nổi đang gây ra sự cố, có một số tùy chọn bạn có thể thử.

Một là sửa đổi căn chỉnh div trong thẻ div nó tự như vậy <div class="kosher" align=left> Nếu điều này không phù hợp với bạn thì có một tùy chọn khác có lề như vậy.

.leftdiv { 
    display: inline-block; 
    width: 40%; 
    float: left; 
} 
.rightdiv { 
    display: block; 
    margin-right: 20px; 
    margin-left: 45%; 
} 

Đừng quên xóa <div align=left>.

Answer 6

Sử dụng display:table-cell; để loại bỏ khoảng trống giữa .Left và .Right

div.left { 
 
    background:blue; 
 
    height:200px; 
 
    width:300px; 
 
} 
 

 
div.right{ 
 
    background:green; 
 
    height:300px; 
 
    width:100px; 
 
} 
 

 
.container{ 
 
    background:black; 
 
    height:400px; 
 
    width:450px; 
 
} 
 

 
.container > div { 
 
    display: table-cell; 
 
}

<div class="container"> 
 
    <div> 
 
    <div class="left"> 
 
     LEFT 
 
    </div> 
 
    </div> 
 
    <div> 
 
    <div class="right"> 
 
     RIGHT 
 
    </div> 
 
    </div> 
 
</div>