Đặt div bên ngoài tự động có cùng chiều cao với nội dung nổi của nó


94

Tôi muốn phần bên ngoài div, màu đen để bọc divbên trong nó. Tôi không muốn sử dụng style='height: 200pxtrong divvới outerdivid như tôi muốn nó được tự động chiều cao của nội dung của nó (ví dụ, nổi divs).

<div id='outerdiv' style='border: 1px solid black;background-color: black;'>
<div style='width=300px;border: red 1px dashed;float: left;'>
    <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
</div>

<div style='width=300px;border: red 1px dashed;float: right;'>
    <p>zzzzzzzzzzzzzzzzzzzzzzzzzzzzz</p>
</div>

Làm thế nào để đạt được điều này?

Câu trả lời:


167

Bạn có thể đặt outerdivCSS của thành này

#outerdiv {
    overflow: hidden; /* make sure this doesn't cause unexpected behaviour */
}

Bạn cũng có thể làm điều này bằng cách thêm một phần tử vào cuối clear: both. Điều này có thể được thêm bình thường, với JS (không phải là một giải pháp tốt) hoặc với :afterphần tử giả CSS (không được hỗ trợ rộng rãi trong các IE cũ hơn).

Vấn đề là các thùng chứa sẽ không mở rộng một cách tự nhiên để bao gồm các trẻ em trôi nổi. Hãy cảnh báo khi sử dụng ví dụ đầu tiên, nếu bạn có bất kỳ phần tử con nào bên ngoài phần tử mẹ, chúng sẽ bị ẩn. Bạn cũng có thể sử dụng 'auto' làm giá trị thuộc tính, nhưng điều này sẽ gọi thanh cuộn nếu bất kỳ phần tử nào xuất hiện bên ngoài.

Bạn cũng có thể thử thả nổi vùng chứa mẹ, nhưng tùy thuộc vào thiết kế của bạn, điều này có thể không khả thi / khó khăn.


37
Tôi ước gì tôi hiểu được logic tại sao tràn: ẩn hoạt động trong trường hợp này.
masteroleary

2
Vâng, tôi đã hy vọng không chỉ tôi nghĩ rằng điều này là phản trực giác. alex?
regularmike

3
@regularmike @masteroleary HTML/CSSchưa bao giờ được công nghệ giao diện người dùng tốt, mọi thứ để phản trực giác trong nó là khá phổ biến :)
Yuriy Nakonechnyy

2
@masteroleary Tôi nhận ra đây là một chủ đề cũ, nhưng gần đây tôi đã cố gắng trả lời một câu hỏi tương tự tại stackoverflow.com/questions/21041297#21041625 - hy vọng nó sẽ hữu ích
xec

1
+1 cho floatgiải pháp. Hoạt động rất tốt với các lỗi khác, đặc biệt là khi kết hợp với Twitter Bootstrap.
Fizzix

17

Đầu tiên, tôi thực sự khuyên bạn nên tạo kiểu CSS của mình trong một tệp CSS bên ngoài, thay vì làm nó trong dòng. Nó dễ bảo trì hơn nhiều và có thể tái sử dụng nhiều hơn bằng cách sử dụng các lớp.

Làm việc với câu trả lời của Alex (& tiền tố rõ ràng của Garret) về "thêm một phần tử vào cuối với clear: cả hai", bạn có thể làm như vậy:

    <div id='outerdiv' style='border: 1px solid black; background-color: black;'>
        <div style='width: 300px; border: red 1px dashed; float: left;'>
            <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
        </div>

        <div style='width: 300px; border: red 1px dashed; float: right;'>
            <p>zzzzzzzzzzzzzzzzzzzzzzzzzzzzz</p>
        </div>
        <div style='clear:both;'></div>
    </div>

Điều này hoạt động (nhưng như bạn có thể thấy CSS nội tuyến không quá đẹp).


Tại sao tôi bị đánh giá thấp? Nó hoạt động, và tôi thừa nhận rằng nó không phải là một giải pháp tốt.
Lycana

1
Tôi không chắc, ít nhất tôi sẽ +1 để đưa bạn về 0. Có thể bạn đã bị bỏ phiếu vì bạn đã không sửa CSS không chính xác của anh ấy ... tức là sử dụng dấu bằng để đặt thuộc tính CSS là không chính xác.
alex

đủ công bằng. Tôi đánh giá cao alex +1. Tôi nghĩ rằng đó là tuyên bố của tôi là một công bằng.
Lycana

Giải pháp này tốt hơn IMO. Tôi sẽ chấp nhận câu trả lời này nếu đó là câu hỏi của tôi.
ksg91

8

Bạn có thể muốn thử phao tự đóng, như chi tiết trên http://www.sitepoint.com/simple-clearing-of-floats/

Vì vậy, có lẽ hãy thử một trong hai overflow: auto(thường hoạt động), hoặc overflow: hidden, như alex đã nói.


hoạt động ẩn, nhưng bạn nói đúng, tự động hoạt động tốt hơn một chút. Cảm ơn.
Matt Setter

7

Tôi biết một số người sẽ ghét tôi, nhưng tôi đã tìm thấy display:table-cellđể giúp đỡ trong trường hợp này.

Nó thực sự sạch hơn.


div bên ngoài sử dụng display: table; và bên trong div sử dụng display: table-cell;
Anukul Limpanasil,

4

Trước hết, bạn không sử dụng width=300pxđó là cài đặt thuộc tính cho thẻ không phải CSS, hãy sử dụng width: 300px;thay thế.

Tôi sẽ đề nghị áp dụng clearfixkỹ thuật trên #outerdiv. Clearfix là một giải pháp chung để xóa 2 div động để div mẹ sẽ mở rộng để chứa 2 div động.

<div id='outerdiv' class='clearfix' style='width:600px; background-color: black;'>
    <div style='width:300px; float: left;'>
        <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
    </div>

    <div style='width:300px; float: left;'>
        <p>zzzzzzzzzzzzzzzzzzzzzzzzzzzzz</p>
    </div>
</div>

Đây là một ví dụ về tình huống của bạn và Clearfix làm gì để giải quyết nó.


3

Sử dụng jQuery:

Đặt Chiều cao mẹ = Bù trừ Chiều cao con.

$(document).ready(function() {
    $(parent).css("height", $(child).attr("offsetHeight"));
}

3
Quá mức cần thiết, khi bạn có thể làm điều đó một mình với CSS.
alex

1
Với câu trả lời của tôi, bạn có thể đặt chiều cao cha giống như chiều cao con nhưng bằng cách sử dụng tràn, chúng tôi sẽ không thay đổi chiều cao cha sẽ tạo ra một số vấn đề nếu chúng tôi hiển thị dữ liệu sau div cha.
Harpal

1

Sử dụng clear: both;

Tôi đã dành hơn một tuần để cố gắng tìm ra điều này!

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.