Làm cách nào để tạo hai div align cạnh nhau?

Question

Tôi đã cố gắng để làm cho hai divs trôi nổi bên cạnh hoặc về cơ bản các giỏ mua hàng và các mặt hàng (cụ thể là jcart và cartbox) nhưng không thể dường như để có được nó. Đây là bản demo: link

tôi đã thử thay đổi float:right; trên hộp css nhưng điều đó sẽ chỉ di chuyển giỏ hàng sang bên phải và nếu tôi xóa phao trên hộp css .. Giỏ hàng và các mục sắp xếp cạnh nhau nhưng đối với một số lý do giỏ hàng dường như thực sự nhỏ và nút "thêm vào giỏ hàng" không xuất hiện để nhấp. Bất kỳ trợ giúp sẽ được đánh giá cao!

HTML:

<form method="post" action="" class="jcart"> 
    <fieldset> 
     // item details here 
    </fieldset> 
    </form> 

    <div class='cartbox'> 
    <div id="jcart"><?php $jcart->display_cart();?></div> 
    <div id='jcart-loader'><img src='img/ajax-loader.gif' alt=''></div> 
    </div> 

CSS:

#jcart { 
position:relative; 
font-size:1.15em; 
top:0; 
margin:0 0 .75em; 
} 

.jcart { 
width:135px; 
margin:0 20px 20px 0; 
padding-top:20px; 
border:solid 2px #E5E5E5; 
float:left; 
background:#F0F0F0; 
text-align:center; 
} 

.cartbox { 
float:left; 
position:relative; 
top:0; 
width:500px; 
margin:0; 
padding:0; 
} 

Answer 1

Bạn cần phải thêm display: inline-block trên các yếu tố mà bạn muốn sắp xếp cạnh nhau, như div yếu tố có một phong cách mặc định display: block, có nghĩa là chúng sẽ chồng theo chiều dọc thay vì theo chiều ngang (không phải hành vi bạn muốn).

Từ giao diện của nó; hộp giỏ mua hàng quá rộng để vừa với nhau trong hộp chứa nội dung. Làm cho div có id là centre rộng hơn (có thể đến 1000px thay vì 960px) và kết hợp với việc thêm thay đổi thuộc tính display, điều đó sẽ làm điều đó.

Xét về mã bạn cần phải viết trực tiếp để có được điều này để thay đổi, làm như sau:

#centre { 
    width: 1000px; 
} 

.cartbox { 
    display: inline-block; 
} 

EDIT: Tôi sửa đổi những thay đổi này vào website của bạn tại địa phương và nó dường như đã từng làm việc.

Answer 2

Bạn có thể sử dụng tài sản để hiển thị nội tuyến hoặc inline-block như @Sam Holmes nói

hoặc bạn có thể làm điều gì đó sử dụng phao. như thế này:

.cartbox div{ 
    float:left; 
} 

hoặc

.cartbox div{ 
    display:inline;// or display:inline-block; 
} 

đây là Demo

Answer 3

Đó là vì bạn không có đủ không gian trong Divs mẹ. Tôi đã cố gắng đặt thành 10px và nó ổn định.

Answer 4

thêm float:left mã css của bạn trong #jcart:

#jcart { 
position:relative; 
float:left 
font-size:1.15em; 
top:0; 
margin:0 0 .75em; 
}