CSS hai div nằm cạnh nhau

Tôi muốn đặt hai <div>s cạnh nhau. Bên phải <div>là khoảng 200px; và bên trái <div>phải lấp đầy phần còn lại của chiều rộng màn hình? Tôi có thể làm cái này như thế nào?

Bạn có thể sử dụng flexbox để bố trí các mục của bạn:

#parent {
  display: flex;
}
#narrow {
  width: 200px;
  background: lightblue;
  /* Just so it's visible */
}
#wide {
  flex: 1;
  /* Grow to rest of container */
  background: lightgreen;
  /* Just so it's visible */
}

<div id="parent">
  <div id="wide">Wide (rest of width)</div>
  <div id="narrow">Narrow (200px)</div>
</div>

Điều này về cơ bản chỉ là cạo bề mặt của flexbox. Flexbox có thể làm những điều khá tuyệt vời.

Để hỗ trợ trình duyệt cũ hơn, bạn có thể sử dụng CSS float và thuộc tính chiều rộng để giải quyết nó.

#narrow {
  float: right;
  width: 200px;
  background: lightblue;
}
#wide {
  float: left;
  width: calc(100% - 200px);
  background: lightgreen;
}

<div id="parent">
  <div id="wide">Wide (rest of width)</div>
  <div id="narrow">Narrow (200px)</div>
</div>

Tôi không biết liệu đây có còn là vấn đề hiện tại hay không nhưng tôi chỉ gặp phải vấn đề tương tự và sử dụng display: inline-block;thẻ CSS . Gói chúng trong một div để chúng có thể được định vị thích hợp.

<div>
    <div style="display: inline-block;">Content1</div>
    <div style="display: inline-block;">Content2</div>
</div>

Lưu ý rằng việc sử dụng thuộc tính kiểu nội tuyến chỉ được sử dụng cho tính ngắn gọn của ví dụ này, tất nhiên những thứ này được sử dụng sẽ được chuyển sang tệp CSS bên ngoài.

Thật không may, đây không phải là một điều nhỏ nhặt để giải quyết cho trường hợp chung. Cách dễ nhất là thêm thuộc tính kiểu css "float: right;" tuy nhiên, với div 200px của bạn, điều này cũng sẽ khiến "chính" của bạn thực sự có chiều rộng đầy đủ và bất kỳ văn bản nào trong đó sẽ nổi xung quanh cạnh của 200px-div, thường trông lạ, tùy thuộc vào nội dung (khá nhiều trong mọi trường hợp ngoại trừ nếu đó là một hình ảnh nổi).

EDIT: Theo đề xuất của Dom, tất nhiên vấn đề bao bọc có thể được giải quyết bằng một lề. Tôi thật ngốc.

Phương thức được đề xuất bởi @roe và @MohitNanda hoạt động, nhưng nếu div đúng được đặt là float:right;, thì nó phải xuất hiện đầu tiên trong nguồn HTML. Điều này phá vỡ thứ tự đọc từ trái sang phải, có thể gây nhầm lẫn nếu trang được hiển thị với các kiểu bị tắt. Nếu đó là trường hợp, tốt hơn là sử dụng div trình bao bọc và định vị tuyệt đối:

<div id="wrap" style="position:relative;">
    <div id="left" style="margin-right:201px;border:1px solid red;">left</div>
    <div id="right" style="position:absolute;width:200px;right:0;top:0;border:1px solid blue;">right</div>
</div>

Chứng minh:

Chỉnh sửa: Hmm, thú vị. Cửa sổ xem trước hiển thị các div được định dạng chính xác, nhưng mục bài đăng được hiển thị thì không. Xin lỗi sau đó, bạn sẽ phải tự mình thử nó.

Tôi gặp vấn đề này ngày hôm nay. Dựa trên các giải pháp trên, điều này làm việc cho tôi:

<div style="width:100%;"> 
    <div style="float:left;">Content left div</div> 
    <div style="float:right;">Content right div</div> 
</div> 

Đơn giản chỉ cần làm cho div cha mở rộng toàn bộ chiều rộng và thả nổi các div có trong đó.

CẬP NHẬT

Nếu bạn cần đặt các phần tử liên tiếp, bạn có thể sử dụng Bố cục Flex . Ở đây bạn có một hướng dẫn Flex khác . Đây là một công cụ CSS tuyệt vời và mặc dù nó không tương thích 100%, mỗi ngày sự hỗ trợ của nó ngày càng tốt hơn. Điều này hoạt động đơn giản như:

HTML

<div class="container">
    <div class="contentA"></div>
    <div class="contentB"></div>
</div>

CSS

.container {
    display: flex;
    width: 100%;
    height: 200px;
}

.contentA {
    flex: 1;
}

.contentB {
    flex: 3;
}

Và những gì bạn nhận được ở đây là một container có tổng kích thước 4 đơn vị, chia sẻ không gian với các con của nó trong mối quan hệ là 1/4 và 3/4.

Tôi đã thực hiện một ví dụ trong CodePen giải quyết vấn đề của bạn. Tôi hy vọng nó sẽ giúp.

http://codepen.io/timbergus/pen/aOoQLR?editors=110

RẤT GIÀ

Có thể đây chỉ là một điều vô nghĩa, nhưng bạn đã thử với một cái bàn chưa? Nó không sử dụng CSS trực tiếp để định vị các div, nhưng nó hoạt động tốt.

Bạn có thể tạo một bảng 1x2 và đặt divsbên trong của bạn , sau đó định dạng bảng bằng CSS để đặt chúng theo ý muốn:

<table>
  <tr>
    <td>
      <div></div>
    </td>
    <td>
      <div></div>
    </td>
  </tr>
</table>

Ghi chú

Nếu bạn muốn tránh sử dụng bảng, như đã nói, bạn có thể sử dụng float: left;và float: right;và trong các yếu tố sau đây, đừng quên thêm một clear: left;, clear: right;hoặc clear: both;để có vị trí làm sạch.

div1 {
    float: right;
} 
div2 {
    float: left;
}

Điều này sẽ hoạt động tốt miễn là bạn đặt clear: bothcho phần tử tách hai khối cột này.

Tôi gặp vấn đề tương tự và phiên bản Mohits hoạt động. Nếu bạn muốn giữ thứ tự bên trái của bạn trong html, chỉ cần thử điều này. Trong trường hợp của tôi, div bên trái đang điều chỉnh kích thước, div bên phải giữ ở chiều rộng 260px.

HTML

<div class="box">
<div class="left">Hello</div>
<div class="right">World</div>
</div>

CSS

.box {
    height: 200px;
    padding-right: 260px;
}    

.box .left {
    float: left;
    height: 200px;
    width: 100%;
}

.box .right {
    height: 200px;
    width: 260px;
    margin-right: -260px;
}

Mẹo nhỏ là sử dụng một miếng đệm bên phải trên hộp chính nhưng sử dụng lại khoảng trống đó bằng cách đặt lại hộp bên phải với lề phải.

Tôi sử dụng hỗn hợp float và overflow-x: hidden. Mã tối thiểu, luôn hoạt động.

https://jsfiddle.net/9934sc4d/4/ - CỘNG VỚI bạn không cần phải xóa phao của bạn!

.left-half{
    width:200px;
    float:left;
}
.right-half{
    overflow-x:hidden;
}

Như mọi người đã chỉ ra, bạn sẽ làm điều này bằng cách đặt float:right;nội dung RHS và lề âm trên LHS.

Tuy nhiên .. nếu bạn không sử dụng float: left;LHS (như Mohit) thì bạn sẽ có được hiệu ứng bước vì div LHS vẫn sẽ sử dụng không gian lề trong bố cục.

Tuy nhiên .. float LHS sẽ thu nhỏ nội dung, vì vậy bạn sẽ cần chèn mã con có chiều rộng xác định nếu điều đó không được chấp nhận, tại thời điểm đó bạn cũng có thể đã xác định chiều rộng trên cha mẹ.

Tuy nhiên .. như David chỉ ra, bạn có thể thay đổi thứ tự đọc của đánh dấu để tránh yêu cầu thả nổi LHS, nhưng điều đó có khả năng đọc và có thể là các vấn đề về khả năng truy cập.

Tuy nhiên .. vấn đề này có thể được giải quyết với các số float được đánh dấu bổ sung

(báo trước: Tôi không tán thành div .clear trong ví dụ đó, xem tại đây để biết chi tiết)

Tất cả mọi thứ được xem xét, tôi nghĩ rằng hầu hết chúng ta đều mong muốn có một chiều rộng không tham lam: còn lại trong CSS3 ...

Đây không phải là câu trả lời cho tất cả mọi người, vì nó không được hỗ trợ trong IE7-, nhưng bạn có thể sử dụng nó và sau đó sử dụng câu trả lời thay thế cho IE7-. Nó được hiển thị: bảng, hiển thị: bảng-hàng và hiển thị: bảng-ô. Lưu ý rằng điều này không sử dụng các bảng để bố trí, nhưng tạo kiểu cho các div sao cho mọi thứ thẳng hàng với tất cả các rắc rối từ phía trên. Của tôi là một ứng dụng html5, vì vậy nó hoạt động rất tốt.

Bài viết này cho thấy một ví dụ: http://www.sitepoint.com/table-basing-layout-is-the-next-big-thing/

Đây là bản định kiểu của bạn sẽ như thế nào:

 .container {
    display: table;
    width:100%;
 }

 .left-column {
    display: table-cell;
 }

 .right-column {
    display: table-cell;
    width: 200px;
 }

Để diễn giải một trong những trang web của tôi có nội dung tương tự:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <style TYPE="text/css"><!--

.section {
    _float: right; 
    margin-right: 210px;
    _margin-right: 10px;
    _width: expression( (document.body.clientWidth - 250) + "px");
}

.navbar {
    margin: 10px 0;
    float: right;
    width: 200px;
    padding: 9pt 0;
}

  --></style>
 </head>
 <body>
  <div class="navbar">
  This will take up the right hand side
  </div>
  <div class="section">
  This will fill go to the left of the "navbar" div
  </div>
 </body>
</html>

chỉ cần sử dụng một chỉ số z và mọi thứ sẽ ổn. đảm bảo có các vị trí được đánh dấu là cố định hoặc tuyệt đối. sau đó không có gì sẽ di chuyển xung quanh như với một thẻ float.