Mở rộng div thành chiều rộng tối đa khi float: left được đặt

115

Tôi có một cái gì đó như thế:

<div style="width:100px;float:left">menu</div>
<div style="float:left">content</div>

cả hai phao đều cần thiết. Tôi muốn div nội dung lấp đầy toàn bộ màn hình trừ đi 100px cho menu. Nếu tôi không sử dụng float, div sẽ mở rộng chính xác như bình thường. Nhưng làm thế nào để tôi thiết lập điều này khi float được thiết lập? Nếu tôi sử dụng sth như

style=width:100%

sau đó div nội dung có kích thước của cha mẹ, đó là cơ thể hoặc div khác mà tôi cũng đã thử, và do đó, tất nhiên nó không vừa với menu và sau đó được hiển thị bên dưới.

html width

— Lũ
nguồn

138

Hy vọng tôi đã hiểu chính xác về bạn, hãy xem điều này: http://jsfiddle.net/EAEKc/

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>Content with Menu</title>
  <style>
    .content .left {
      float: left;
      width: 100px;
      background-color: green;
    }
    
    .content .right {
      margin-left: 100px;
      background-color: red;
    }
  </style>
</head>

<body>
  <div class="content">
    <div class="left">
      <p>Hi, Flo!</p>
    </div>
    <div class="right">
      <p>is</p>
      <p>this</p>
      <p>what</p>
      <p>you are looking for?</p>
    </div>
  </div>
</body>

</html>

Mở rộng đoạn trích

— merkuro
nguồn

5

Câu hỏi nêu rõ "cả hai phao đều cần thiết".

— Lưỡi liềm tươi

8

Vâng, bạn đúng và tôi đồng ý. Tuy nhiên tôi nghĩ Flo chỉ đề cập đến điều này, bởi vì anh ấy nghĩ rằng cả hai! cần thiết để có được bố trí mong muốn và do đó giải pháp thay thế của tôi.

— merkuro

@merkuro: điểm tốt. Tôi đồng ý, ".right" không cần phải được thả nổi để có được hiệu quả mong muốn. @Flo: bạn có thể xác nhận, phải là div nội dung được thả nổi không? Giống như vì lý do khác?

— Lưỡi liềm tươi

có thể hoạt động tôi sẽ thử một chút với điều đó, bạn hiểu đúng lý do đó và phao đẹp hơn, nhưng tôi nghĩ nó sẽ không hoạt động

— Flo

2

Ahh jeah và tôi một lần nữa thấy lý do tại sao tôi thay đổi nó thành float: Ie7 và Firefox hoạt động tốt, nhưng tức là 5.5 và tức là 6 bắt đầu lề ở cạnh phải của div bên trái, vì vậy nó có 236px (chiều rộng thực, 100 là một ví dụ) khoảng cách giữa cả hai div

— Flo

100

Cách tương thích chéo nhất mà tôi thấy khi làm việc này không rõ ràng lắm. Bạn cần loại bỏ float từ cột thứ hai, và áp dụng overflow:hiddencho nó. Mặc dù điều này dường như sẽ che giấu bất kỳ nội dung nào bên ngoài div, nhưng nó thực sự buộc div phải ở trong cha mẹ của nó.

Sử dụng mã của bạn, đây là một ví dụ về cách có thể được thực hiện:

<div style="width: 100px; float: left;">menu</div>
<div style="overflow: hidden;">content</div>

Hy vọng điều này hữu ích cho bất kỳ ai gặp phải vấn đề này, đó là những gì tôi thấy hoạt động tốt nhất cho trang web tôi đang xây dựng, sau khi cố gắng làm cho nó phù hợp với các độ phân giải khác. Thật không may, điều này cũng không hoạt động nếu bạn bao gồm cả quyền được thả nổi divsau nội dung, nếu có ai biết cách tốt để làm cho nó hoạt động, với khả năng tương thích IE tốt, tôi rất vui khi nghe nó.

Mới, tùy chọn tốt hơn bằng cách sử dụng `display: flex;`

Bây giờ, mô hình Flexbox được triển khai khá rộng rãi, tôi thực sự khuyên bạn nên sử dụng nó, vì nó cho phép tính flexlinh hoạt hơn nhiều với bố cục. Đây là một cột hai cột đơn giản như ban đầu:

<div style="display: flex;">
    <div style="width: 100px;">menu</div>
    <div style="flex: 1;">content</div>
</div>

Và đây là một cột ba cột với cột trung tâm có chiều rộng linh hoạt!

<div style="display: flex;">
    <div style="width: 100px;">menu</div>
    <div style="flex:1;">content</div>
    <div style="width: 100px;">sidebar</div>
</div>

— alanaktion
nguồn

Sau một số thử nghiệm tiếp theo, có vẻ như bạn không cần kích hoạt hasLayout với "vị trí: tương đối" để điều này hoạt động trong IE 6, tôi không chắc chắn về IE 5, nhưng nói chung không phải là vấn đề để bao gồm nó, chỉ để được an toàn.

— alanaktion

1

Câu trả lời này có vẻ không được đánh giá cao, nhưng nó thực sự tốt để biết. Điều này không cho phép bạn nổi, ngay cả với một yếu tố nổi bên trong div. Tôi là google "chặn định dạng ngữ cảnh." ngay bây giờ.

— Carlos Gil

Cách tốt nhất là sử dụng bảng 2 cols đơn giản thay vì lãng phí thời gian để thêm hàng tấn thủ thuật không tương thích trình duyệt CSS

— Marco Demaio

@Marco Tôi cần sử dụng CSS cho việc này vì thiết kế của tôi rất nhạy. Kích thước màn hình khác nhau cần bố cục khác nhau, vì vậy một bảng sẽ không hoạt động. Ngoài ra, phương pháp này dường như hoạt động trong cơ bản bất kỳ trình duyệt nào mà mọi người vẫn sử dụng.

— alanaktion

1

@MarcoDemaio, quan điểm của tôi là ở kích thước màn hình trong đó cột cố định nhỏ hơn sẽ lớn bằng cột chính, chẳng hạn như trên thiết bị di động, tôi muốn hai cột trở thành các hàng có chiều rộng đầy đủ, không thể thực hiện được với các bảng trừ khi tôi thực sự muốn di chuyển nội dung xung quanh bằng JavaScript.

— alanaktion

31

Giải pháp mà không sửa kích thước trên lề của bạn

.content .right{
    overflow: auto; 
    background-color: red;
}

+1 cho Merkuro, nhưng nếu kích thước của float thay đổi lề cố định của bạn sẽ không thành công. Nếu bạn sử dụng CSS ở trên bên phải, divnó sẽ thay đổi kích thước độc đáo với thay đổi kích thước ở bên trái. Nó linh hoạt hơn một chút như thế. Kiểm tra các câu đố ở đây: http://jsfiddle.net/9ZHBK/144/

— Héo
nguồn

2

@alanaktion Mình lấy cái ô tô không cần thiết đi. Sự khác biệt là trong giá trị tràn. Rõ ràng overflow: hiddenvà overflow autokết quả trong cùng một hành vi. Tôi cũng nghĩ mọi người đánh giá cao Fiddle.

— Héo

Nếu bất cứ ai muốn biết lý do tại sao điều này hoạt động, xem tại đây: stackoverflow.com/a/1767270/2756409

— TylerH

Tôi nghĩ rằng điều này là tốt hơn so với giải pháp của merkuro.

— SkuraZZ

6

Các phần tử được thả nổi được đưa ra khỏi bố cục luồng thông thường và các phần tử khối, chẳng hạn như DIV, không còn kéo dài chiều rộng của cha mẹ chúng. Các quy tắc thay đổi trong tình huống này. Thay vì phát minh lại bánh xe, hãy kiểm tra trang web này để biết một số giải pháp có thể để tạo bố cục hai cột bạn đang theo sau: http://www.maxdesign.com.au/presentation/page_layouts/

Cụ thể, "Bố cục hai cột chất lỏng".

Chúc mừng!

— Sean Aitken
nguồn

4

Đây là một giải pháp cập nhật cho HTML 5 nếu bất kỳ ai quan tâm và không thích "nổi".

Bảng hoạt động tuyệt vời trong trường hợp này khi bạn có thể đặt chiều rộng cố định cho bảng & ô bảng.

.content-container{
    display: table;
    width: 300px;
}

.content .right{
    display: table-cell;   
    background-color:green;
    width: 100px;
}

http://jsfiddle.net/EAEKc/596/ mã nguồn gốc từ @merkuro

— Người tuyết
nguồn

+1 cuối cùng một cái gì đó hoạt động với phần tử chiều rộng cố định ở bên phải, ngay cả khi về mặt kỹ thuật nó không sử dụng float.

— Karthik T

+1 nên hoàn toàn có. sau nhiều năm vật lộn với phao và các vị trí và bảng, đây là giải pháp phù hợp. các giải pháp được chấp nhận tuyên truyền css không an toàn.

— horace

4

việc sử dụng này có thể giải quyết vấn đề của bạn.

width: calc(100% - 100px);

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>Content with Menu</title>
  <style>
    .content .left {
      float: left;
      width: 100px;
      background-color: green;
    }
    
    .content .right {
      float: left;
      width: calc(100% - 100px);
      background-color: red;
    }
  </style>
</head>

<body>
  <div class="content">
    <div class="left">
      <p>Hi, Flo!</p>
    </div>
    <div class="right">
      <p>is</p>
      <p>this</p>
      <p>what</p>
      <p>you are looking for?</p>
    </div>
  </div>
</body>

</html>

Mở rộng đoạn trích

— suathd
nguồn

Chào mừng đến với SO. Bạn có thể thêm một lời giải thích như thế nào điều này hoạt động?

— yacc

3

Và dựa trên merkurogiải pháp, nếu bạn muốn tối đa hóa cái bên trái, bạn nên sử dụng:

<!DOCTYPE html>   
<html lang="en">     
    <head>              
        <meta "charset="UTF-8" />   
        <title>Content with Menu</title>                 
        <style>
            .content .left {
                margin-right: 100px;
                background-color: green;
            }
            .content .right {
                float: right;
                width: 100px;
                background-color: red;
            }
        </style>              
    </head>
    <body>        
        <div class="content">
            <div class="right">  
                <p>is</p>
                <p>this</p>
                <p>what</p>
                <p>you are looking for?</p>
            </div>
            <div class="left">
                <p>Hi, Flo!</p>
            </div>
        </div>
    </body>
</html>

Chưa được thử nghiệm trên IE, vì vậy nó có thể bị hỏng trên IE.

— kubilayeksioglu
nguồn

1

Câu trả lời được chấp nhận có thể có hiệu quả, nhưng tôi không thích ý tưởng về các lề chồng chéo. Trong HTML5, bạn sẽ làm điều này với display: flex;. Đó là một giải pháp sạch. Chỉ cần đặt chiều rộng cho một phần tử và flex-grow: 1;cho phần tử động. Một phiên bản chỉnh sửa của merkuros fiddle: https://jsfiddle.net/EAEKc/1499/

— Christoph Bühler
nguồn

0

Xin chào, có một cách dễ dàng với phương thức ẩn tràn trên phần tử bên phải.

    .content .left {
        float:left;
        width:100px;
        background-color:green;
      }
      .content .right {
        overflow: hidden;
        background-color:red;
      }

<!DOCTYPE html>   
<html lang="en">     
    <head>      
           
        <title>Content Menu</title>         
          
    </head>
    <body>    
    <div class="content">
      <div class="left">
        <p>Hi, Flo! I am Left</p>
      </div>
      <div class="right">  
        <p>is</p>
        <p>this</p>
        <p>what</p>
        <p>you are looking for?</p>
        <p> It done with overflow hidden and result is same.</p>
      </div>
    </div>
    </body>
</html>

Mở rộng đoạn trích

— Sanjib Debnath
nguồn

-1

Điều này có thể làm việc:

    div{
    display:inline-block;
    width:100%;
    float:left;
    }

— kirtan-shah
nguồn

Mở rộng div thành chiều rộng tối đa khi float: left được đặt

Mới, tùy chọn tốt hơn bằng cách sử dụng display: flex;

Giải pháp mà không sửa kích thước trên lề của bạn

Mới, tùy chọn tốt hơn bằng cách sử dụng `display: flex;`