ngăn div lấy độ rộng 100%

Question

<div style="position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px;"> 

    <div style=" 
     border: 2px solid black; 
     margin: 0 auto; 
     text-align: center; 
     padding: 3px;"> 

    Hello<br />Hola 

    </div> 

    <div style=" 
     border: 2px solid black; 
     margin: 0 auto; 
     text-align: center; 
     padding: 3px;"> 

    Another Sentence 

    </div> 

</div> 

Tôi gặp sự cố: đường viền của phạm vi div bên trong trên toàn bộ chiều rộng của trang, nhưng tôi muốn chúng chỉ khung nội dung bên trong chúng. Nếu tôi sử dụng: display: inline các đường viền khung mỗi dòng một cách riêng biệt và chồng lên nhau, do đó nó không hoạt động - ai đó có thể giúp đỡ?

P.S phong cách không được khai báo như thế này trong tài liệu gốc nhưng trong biểu định kiểu

Answer 1

Gán chiều rộng cho phần tử được định vị hoàn toàn? Nếu bạn đang tìm kiếm gói thu nhỏ, float:left hoặc display:inline-block là hoàn hảo cho điều đó.

Answer 2

Hãy thử display:inline-block, nó luôn giúp tôi trong các tình huống như thế này.

http://jsfiddle.net/FaYLk/

Answer 3

của nó không đơn giản chỉ cần làm:

display: inline-block; 

Bạn phải làm nhiều hơn thế để trình duyệt chéo này.

display: inline-block; 
display: -moz-inline-stack; /* for firefox 2 */ 
*display: inline; /* for ie 6 and 7 */ 

Answer 4

Đặt vùng chứa xung quanh tất cả nội dung. Ví dụ:

<div class='container'> <div>I wont be 100%</div> <div>Nor will I :)</div> </div> 
.container{ display: inline-block; }