Tôi mong đợi hai thẻ span trong mẫu sau đây sẽ hiển thị cạnh nhau, thay vào đó chúng hiển thị bên dưới thẻ kia. Nếu tôi thiết lập chiều rộng của lớp span.right đến 49% chúng hiển thị bên cạnh nhau. Tôi không thể tìm ra lý do tại sao nhịp phải được đẩy xuống như khoảng bên phải có một số padding/lề vô hình mà làm cho nó mất hơn 50%. Tôi đang cố gắng để có được điều này được thực hiện mà không cần sử dụng bảng html. Bất kỳ ý tưởng?inline-block trên span
<html>
<head>
<title>Test Page</title>
<style type='text/css'>
* {
margin: 0;
}
html,body{
margin:0;
padding:0;
height:100%;
width:100%;
border:none;
}
div.header{
width:100%;
height:80px;
vertical-align:top;
}
span.left {
height:80px;
width:50%;
display:inline-block;
background-color:pink;
}
span.right {
vertical-align:top;
display:inline-block;
text-align:right;
height:80px;
width:50%;
background-color:red;
}
</style>
</head>
<body>
<div class='header'>
<span class='left'>Left Span 50% width</span>
<span class='right'>Right Span 50% width</span>
</div>
</body>
</html>
Cảm ơn lời giải thích. Các phao: trái hoạt động đẹp với kết quả mong đợi trong FF 3.1. Thật không may, trong IE6 khoảng bên phải làm cho 50% của 50%, có hiệu lực cho nó một chiều rộng 25% của cửa sổ trình duyệt. Thiết lập chiều rộng của nó đến 100% đạt được kết quả mong muốn nhưng phá vỡ trong FF 3.1 đó là trong chế độ tuân thủ tiêu chuẩn và tôi hiểu điều đó. Bắt nó hoạt động cả trong FF và IE 6, mà không cần đến hacks hoặc sử dụng nhiều sheet CSS đã là một thách thức
Tại sao hỗ trợ IE6? http://www.ie6nomore.com/ – jrummell