Cách thêm đường viền vào div mà không làm rối loạn bố cục?

tôi có các yếu tố sau:Cách thêm đường viền vào div mà không làm rối loạn bố cục?

<body> 
    <div id="container"> 
     <div id="sidebar1"></div> 
     <div id="content"> 
      <h3>Lorem ipsum</h3> 
      <p>Whatnot.</p> 
     </div> 
     <div id="sidebar2"></div> 
    </div> 
</body>

Tiếp theo phong cách này:

/* ~~ this fixed width container surrounds all other divs~~ */ 
#container { 
    width: 960px; 
    background-color: #FFF; 
    margin: 0 auto; 
    overflow: hidden; 
} 
#sidebar1 { 
    float: left; 
    width: 180px; 
    /*border: 2px solid black;*/ 
    background-color: #EADCAE; 
    padding: 0px 0px 100% 0px; 
} 
#content { 
    padding: 10px 0; 
    width: 600px; 
    float: left; 
} 
#sidebar2 { 
    float: left; 
    width: 180px; 
    /*border: 2px solid black;*/ 
    background-color: #EADCAE; 
    padding: 0px 0px 100% 0px; 
}

tôi đang cố gắng để đạt được bố trí này: http://jsfiddle.net/QnRe4/

Nhưng ngay sau khi tôi bỏ bình luận biên giới nó biến thành điều này: http://jsfiddle.net/FZxPQ/

** Đã giải quyết **

Chiều rộng đường viền được thêm vào chiều rộng tổng của mỗi phần tử làm cho chúng quá rộng để vừa với vùng chứa. Loại bỏ 2x chiều rộng đường viền từ chiều rộng của mỗi cột sẽ giải quyết được vấn đề: http://jsfiddle.net/FZxPQ/4/

Nguồn

2013-05-24 Pi_

Vấn đề là khi bạn thêm vào bảng, kích thước của div bên ngoài tăng 4, 2px trên mỗi kích thước. Vì vậy, vùng chứa của bạn cần tăng kích thước 8px.

Vì vậy, thay đổi container của bạn để:

#container { 
    width: 970px; 
    background-color: #FFF; 
    margin: 0 auto; 
    overflow: hidden; 
}

Xem: http://jsfiddle.net/QnRe4/13/

Nguồn

2013-05-24 13:36:14 Tyanna

Như thế này? http://jsfiddle.net/QnRe4/3/

Điều đang xảy ra là các yếu tố của bạn đang mất đi các thuộc tính hiển thị block khi bạn xóa đường viền.

Vì vậy, hãy thêm display: block vào các yếu tố đó để giải quyết điều đó.

Tôi cũng đã điều chỉnh chiều rộng của phần tử của bạn theo chiều rộng 4px để giữ lại bố cục, vì việc loại bỏ các đường viền đó về cơ bản sẽ giảm không gian mà các phần tử đó chiếm trên trang.

Nguồn

2013-05-24 13:32:27 johnkavanagh

Có. Câu trả lời tốt hơn nhiều so với tôi. :) – Jonathan

Cảm ơn @ Jonathan! :) – johnkavanagh

Tôi không biết rằng chiều rộng của đường viền đã được thêm vào tổng chiều rộng của phần tử. Cảm ơn bạn @jognkavanagh –

Khi bạn áp dụng đường viền, đường viền nằm ngoài các div, vì vậy thanh bên sẽ có chiều rộng 184px không phù hợp với vùng chứa. thử addig width: 176px

http://jsfiddle.net/QnRe4/12/

#sidebar1 { 
    float: left; 
    width: 176px; 
    border: 2px solid black; 
    background-color: #EADCAE; 
    padding: 0px 0px 100% 0px; 
}

Nguồn

2013-05-24 13:32:59 Seer

một giải pháp khác nếu bạn thêm thuộc tính 'box-sizing' vào sidebars của mình: [đọc thêm về điều này tại đây] (http://www.w3schools.com/cssref/css3_pr_box-sizing.asp) – Seer

Cảm ơn bạn @Seer –

CSS box-sizing để giải thoát! tài sản

này làm thay đổi mô hình hộp CSS mặc định dùng để tính chiều rộng và chiều cao của các yếu tố

Giá trị border-box nghĩa là

chiều rộng và chiều cao tính bao gồm padding và biên giới

/* support Firefox, WebKit, Opera and IE8+ */ 
#container, #sidebar1, #sidebar2 { 
     box-sizing: border-box; 
    -moz-box-sizing: border-box; 
}

Tuy nhiên, browser support không được chuẩn hóa 100%.

Khi các câu trả lời khác đã đề cập đến chiều rộng bổ sung đẩy thanh bên ngoài căn chỉnh là do phép tính chiều rộng bao gồm chiều rộng biên giới . box-sizing chỉ cần cho trình duyệt biết rằng một phần tử có chiều rộng/chiều cao nhất định phải bao gồm bất kỳ giá trị đường viền và đệm nào vào các tính toán chiều rộng/chiều cao cuối cùng.

Nguồn

2013-05-24 13:34:58 andyb

bất lợi cho phương pháp này là khả năng tương thích với trình duyệt. Đoạn mã trên sẽ hoạt động trên một số trình duyệt hiện đại, nhưng thực tế bạn cần phải sử dụng tiền tố của nhà cung cấp để giải thích cho tất cả các trình duyệt hiện tại. Ngay cả FireFox mới nhất vẫn cần -moz. (Nguồn: http://css-tricks.com/box-sizing/). – johnkavanagh

đây có lẽ là câu trả lời mà OP đang tìm kiếm. @johnkavanagh - tiền tố của nhà cung cấp không phải là kết thúc của thế giới, và ngoài khả năng tương thích trình duyệt đó là tốt, trừ khi bạn có kế hoạch hỗ trợ IE6/IE7 (naaah ...;)). – Spudley

Đối với tôi, tính năng hộp kích thước hoạt động trong tất cả các trình duyệt. Chỉ cần thêm tiền tố của nhà cung cấp cho Firefox, điều đó không quá tệ. Giới hạn của tôi là IE8, không quan tâm đến trình duyệt cũ hơn. – pzin

Các giải pháp khác mà không có chiều rộng thay đổi container;

click here

Nguồn

2013-05-24 14:01:06

Cách thêm đường viền vào div mà không làm rối loạn bố cục?

Trả lời

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