các yếu tố nổi <br clear="both"/> theo cách css tốt hơn?

Tôi có một vài yếu tố nổi như thanh bên bên ngoài khu vực nội dung. Nếu tôi không thêm <br clear="both"/> vào cuối thanh bên, thì chân trang và các phần của nền sẽ nổi lên kỳ lạ.các yếu tố nổi <br clear="both"/> theo cách css tốt hơn?

Bất kỳ giải pháp nhanh nào mà tôi đã bỏ lỡ?

Cảm ơn bạn.

Chỉnh sửa: Ví dụ: tôi muốn đường viền không có khoảng trống và nền cũng không có khoảng trắng. Nên chỉ trông giống như hai phần: 1) nội dung với sidebar 2) chân

<!DOCTYPE html> 

<html lang="en"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <title>layout</title> 

    <style type="text/css"> 

    body { 
     margin:0; 
     padding:0; 
    } 

    #main { 
     background:#cfcfcf; 
    } 

    .inner { 
     margin: 0 auto; 
     padding: 96px 72px 0; 
     width: 1068px; 
     border-color: #000; 
     border-style: solid; 
     border-width: 0 1px; 
     color: #3C3C3C; 
    } 

    .post { 
     width: 705px; 
     background:#999; 
     float:left; 
    } 

    #comments, #respond { 
     background:#999; 
    } 

    #sidebar { 
     background:#777; 
    } 

    #footer { 
     clear:both; 
     background:gray; 
    } 

    </style> 
</head> 
<body> 

    <div id="main"> 

     <div class="inner"> 

      <div id="post" class="post"> 

       <h2>Lorem Ipsum Test Page</h2> 

       <div class="entry"> 

        <p>Lorem ipsum sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> 

        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> 

       </div> <!-- entry --> 

      </div> <!-- post --> 

      <div id="sidebar"> 

       <h2>Meta</h2> 
        <ul> 
         <li>Login</li> 
         <li>Anything</li> 
        </ul> 

       <h2>Subscribe</h2> 
        <ul> 
         <li>Entries (RSS)</li> 
         <li>Comments (RSS)</li> 
        </ul> 

      </div> <!-- sidebar --> 

     </div> <!-- inner --> 

    </div> <!-- main --> 

    <div id="footer"> 
     <div class="inner"> 

     Something 

     </div> <!-- inner --> 
    </div> <!-- footer --> 

</body> 
</html>

Nguồn

2011-01-12 matt

HTML của bạn và mã CSS cho divs là gì? – BoltClock

Bài viết hay: http://css-tricks.com/all-about-floats/ – kapa

Bạn có thể đặt các thành phần có chứa overflow thuộc tính thành một thứ khác không phải là visible.

Nguồn

2011-01-12 20:32:24 Jim

Cũng thấy http://www.quirksmode.org/css/clearing.html – yorick

nó hoạt động nếu tôi đặt div .inner thành tràn: ẩn! tôi tự hỏi nếu nó cũng hoạt động trong tức là – matt

Bạn chỉ có thể làm cho chân nên nó có một phong cách với clear: both.

Nguồn

2011-01-12 20:29:20 Jacob

Cách chính xác là xóa trái và phải cho phần tử tiếp theo.

Vì vậy, trên chân bạn có thể thêm:

#footer { 
    clear: both; 
}

này sẽ buộc chân đi xuống đến dòng kế tiếp, và nó là cách 'đúng'. Nó cũng sẽ dễ dàng hơn để thay đổi thiết kế của bạn sau này bởi vì bạn sẽ không phải đi thay đổi đánh dấu, chỉ cần CSS.

Nguồn

2011-01-12 20:32:01

tôi đã chỉnh sửa bài đăng của mình. xin vui lòng có một cái nhìn. làm thế nào bạn sẽ giải quyết nó trong trường hợp này. một rõ ràng đơn giản: cả hai không thực hiện công việc ... nền và biên giới là lỗi – matt

display: inline-block; thực sự tuyệt vời. Quá xấu IE không thực sự hỗ trợ nó.

Nguồn

2011-01-12 20:34:57 tdammers

Thành thật mà nói, tôi sẽ không cố gắng để vượt qua nó. Bạn có thể đặt rõ ràng ở chân như những người khác đã gợi ý; nhưng bạn không được đảm bảo rằng các phần khác của html của bạn sẽ không bị trôi nổi hoặc bị chặn không đúng cách. Nếu bạn áp dụng chính sách chỉ xóa các yếu tố khi chúng lộn xộn do nổi trong một phần ngẫu nhiên của html của bạn; bạn có thể làm thói quen luôn làm điều đó. Thay vào đó, sau đây là ví dụ về một kiểu thường đảm bảo rằng các phần tử khác sẽ không được thả nổi không đúng cách:

<div> 
    <div style="float:right;"></div> 
    <div style="float:right;"></div> 
    <!--Add a clear div as last sibling of any floated elements--> 
    <div style="clear:both;"></div> 
</div>

Ngoài ra, tôi sẽ sử dụng div trống thay vì br. Thats chỉ cho tôi mặc dù.

Vì vậy, rút ra từ ví dụ của bạn:

 </div> <!-- post --> 

     <!-- insert empty clear div hear --> 
     <div style="clear:both;"></div> 

     <div id="sidebar">

Nguồn

2011-01-12 20:40:55 Dave

các yếu tố nổi <br clear="both"/> theo cách css tốt hơn?

Trả lời

Các vấn đề liên quan