Cách đặt div cạnh nhau

Tôi có một div trình bao bọc chính được đặt 100% chiều rộng. Bên trong đó tôi muốn có hai div, một div có chiều rộng cố định và cái kia lấp đầy phần còn lại của không gian. Làm thế nào để tôi nổi div thứ hai để lấp đầy phần còn lại của không gian. Cảm ơn vì bất kì sự giúp đỡ.

Có nhiều cách để làm những gì bạn yêu cầu:

1. Sử dụng thuộc floattính CSS :

   <div style="width: 100%; overflow: hidden;">
       <div style="width: 600px; float: left;"> Left </div>
       <div style="margin-left: 620px;"> Right </div>
   </div>
   

2. Sử dụng thuộc displaytính CSS - có thể được sử dụng để làm cho divs hoạt động như tablesau:

   <div style="width: 100%; display: table;">
       <div style="display: table-row">
           <div style="width: 600px; display: table-cell;"> Left </div>
           <div style="display: table-cell;"> Right </div>
       </div>
   </div>
   

Có nhiều phương pháp hơn, nhưng hai phương pháp đó là phổ biến nhất.

CSS3 đã giới thiệu các hộp linh hoạt (còn gọi là hộp flex) cũng có thể đạt được hành vi này.

Đơn giản chỉ cần xác định chiều rộng của div đầu tiên, và sau đó cung cấp flex-growgiá trị thứ hai 1sẽ cho phép nó lấp đầy chiều rộng còn lại của cha mẹ.

.container{
    display: flex;
}
.fixed{
    width: 200px;
}
.flex-item{
    flex-grow: 1;
}

<div class="container">
  <div class="fixed"></div>
  <div class="flex-item"></div>
</div>

bản demo jsFiddle

Lưu ý rằng hộp flex không tương thích ngược với các trình duyệt cũ, nhưng là một tùy chọn tuyệt vời để nhắm mục tiêu các trình duyệt hiện đại (xem thêm Caniuse và MDN ). Một hướng dẫn toàn diện tuyệt vời về cách sử dụng hộp flex có sẵn trên CSS Tricks .

Tôi không biết nhiều về các chiến lược thiết kế HTML và CSS, nhưng nếu bạn đang tìm kiếm thứ gì đó đơn giản và nó sẽ tự động phù hợp với màn hình (như tôi), tôi tin rằng giải pháp đơn giản nhất là làm cho các div hoạt động như những từ trong một đoạn văn. Hãy thử chỉ địnhdisplay: inline-block

<div style="display: inline-block">
   Content in column A
</div>
<div style="display: inline-block">
   Content in column B
</div>

Bạn có thể hoặc có thể không cần chỉ định chiều rộng của DIV

Bạn có thể sử dụng lưới CSS để đạt được điều này, đây là phiên bản dài cho mục đích minh họa:

div.container {
    display: grid;
    grid-template-columns: 220px 20px auto;
    grid-template-rows: auto;
}

div.left {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: row1-start
    grid-row-end: 3;
    background-color: Aqua;
}

div.right {
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end; 1;
    background-color: Silver;
}

div.below {
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 2;
    grid-row-end; 2;
}

<div class="container">
    <div class="left">Left</div>
    <div class="right">Right</div>
    <div class="below">Below</div>
</div>

Hoặc phương pháp truyền thống hơn sử dụng float và lề.

Tôi đã bao gồm một màu nền trong ví dụ này để giúp hiển thị mọi thứ ở đâu - và cũng phải làm gì với nội dung bên dưới khu vực nổi.

Đừng đặt phong cách của bạn trong cuộc sống thực, trích xuất chúng thành một biểu định kiểu.

div.left {
    width: 200px;
    float: left;
    background-color: Aqua;
}

div.right {
    margin-left: 220px;
    background-color: Silver;
}

div.clear {
    clear: both;
}

    <div class="left"> Left </div>
    <div class="right"> Right </div>
    <div class="clear">Below</div>

<div style="width: 200px; float: left; background-color: Aqua;"> Left </div>
<div style="margin-left: 220px; background-color: Silver;"> Right </div>
<div style="clear: both;">Below</div>

Cung cấp cho div đầu tiên một float bên trái và cố định với, div thứ hai 100% chiều rộng một float bên trái. Điều đó sẽ làm các trick. Nếu bạn muốn đặt các mục bên dưới nó, bạn cần phải rõ ràng: cả trên mục bạn muốn đặt bên dưới

<div class="container" style="width: 100%;">
    <div class="sidebar" style="width: 200px; float: left;">
        Sidebar
    </div>
    <div class="content" style="margin-left: 202px;">
        content 
    </div>
</div>

Đây sẽ là trình duyệt tương thích chéo. Nếu không có lề trái, bạn sẽ gặp vấn đề với nội dung chạy hết sang trái nếu nội dung của bạn dài hơn thanh bên.

Nếu bạn không gắn thẻ IE6, sau đó thả nổi thứ hai <div>và đặt cho nó một lề bằng (hoặc có thể lớn hơn một chút so với) <div>chiều rộng cố định đầu tiên .

HTML:

<div id="main-wrapper">
    <div id="fixed-width"> lorem ipsum </div>
    <div id="rest-of-space"> dolor sit amet </div>
</div>

CSS:

#main-wrapper {
    100%;
    background:red;
}
#fixed-width {
    width:100px;
    float:left
}
#rest-of-space {
    margin-left:101px;
        /* May have to increase depending on borders and margin of the fixd width div*/
    background:blue;
}

Ký quỹ cho khả năng 'phần còn lại của không gian' <div>có thể chứa nhiều nội dung hơn 'chiều rộng cố định' <div>.

Đừng cho chiều rộng cố định một nền; nếu bạn cần thấy rõ những cái này là 'cột' khác nhau thì hãy sử dụng thủ thuật Faux Cột .