Vấn đề duy nhất của tôi là làm cho chúng xếp thành hàng ngang ba chiều và có khoảng cách bằng nhau. Rõ ràng, các nhịp không thể có chiều rộng và các div (và các nhịp có display: block) không xuất hiện theo chiều ngang bên cạnh nhau. Gợi ý?
<div style='width:30%; text-align:center; float:left; clear:both;'> Là những gì tôi có bây giờ.
Câu trả lời:
Bạn có thể sử dụng div với float: left;thuộc tính này sẽ làm cho chúng xuất hiện theo chiều ngang bên cạnh nhau, nhưng sau đó bạn có thể cần sử dụng xóa trên các phần tử sau để đảm bảo chúng không chồng chéo.
overflow: hidden. Xem: stackoverflow.com/questions/323599/…
padding-leftở bên phải div, nó sẽ bị bỏ qua.
<div style="display: in-line"></div><div style="display: in-line"></div>nên làm việc tốt.
overflow: hiddenlà giải pháp tốt nhất.
Bạn có thể dùng
.floatybox {
display: inline-block;
width: 123px;
}
Nếu bạn chỉ cần hỗ trợ các trình duyệt có hỗ trợ khối nội tuyến. Các khối nội tuyến có thể có chiều rộng, nhưng nằm trong dòng, giống như các phần tử nút.
Ồ, và bạn có thể muốn thêm vertical-align: top trên các phần tử để đảm bảo mọi thứ thẳng hàng
<style>
#whatever div {
display: inline;
margin: 0 1em 0 1em;
width: 30%;
}
</style>
<div id="whatever">
<div>content</div>
<div>content</div>
<div>content</div>
</div>
Về mặt kỹ thuật, Span là một phần tử nội tuyến, tuy nhiên nó có thể có chiều rộng, bạn chỉ cần đặt thuộc tính hiển thị của chúng thành khối trước. Tuy nhiên, trong bối cảnh này, một div có lẽ thích hợp hơn, vì tôi đoán bạn muốn điền nội dung vào các div này.
Một điều bạn chắc chắn không muốn làm là clear:bothđặt trên div. Đặt nó như vậy sẽ có nghĩa là trình duyệt sẽ không cho phép bất kỳ phần tử nào nằm trên cùng một dòng với chúng. Kết quả là các phần tử của bạn sẽ xếp chồng lên nhau.
Lưu ý, việc sử dụng display:inline. Điều này giải quyết lỗi tăng gấp đôi lợi nhuận của ie6. Bạn có thể giải quyết vấn đề này theo những cách khác nếu cần, chẳng hạn như bảng định kiểu có điều kiện.
Tôi đã thêm một trình bao bọc (#w Anything) vì tôi đoán đây sẽ không phải là các phần tử duy nhất trên trang, vì vậy gần như chắc chắn bạn sẽ cần phải tách chúng khỏi các phần tử trang khác.
Dù sao, tôi hy vọng điều đó hữu ích.
Tôi sẽ làm điều đó như thế này vì nó cung cấp cho bạn 3 cột có kích thước đồng đều, khoảng cách và tỷ lệ (thậm chí). Lưu ý: Tính năng này không được thử nghiệm nên có thể cần điều chỉnh cho các trình duyệt cũ hơn.
<style>
html, body {
margin: 0;
padding: 0;
}
.content {
float: left;
width: 30%;
border:none;
}
.rightcontent {
float: right;
width: 30%;
border:none
}
.hspacer {
width:5%;
float:left;
}
.clear {
clear:both;
}
</style>
<div class="content">content</div>
<div class="hspacer"> </div>
<div class="content">content</div>
<div class="hspacer"> </div>
<div class="rightcontent">content</div>
<div class="clear"></div>
Tôi sẽ dùng:
<style>
.all {
display: table;
}
.maincontent {
float: left;
width: 60%;
}
.sidebox {
float: right;
width: 30%;
}
<div class="all">
<div class="maincontent">
MainContent
</div>
<div class="sidebox">
SideboxContent
</div>
</div>
Đây là lần đầu tiên tôi sử dụng 'công cụ mã' này từ tràn ... nhưng hãy làm ngay bây giờ ...
Những gì bạn có thể làm là tra cứu các bố cục dựa trên lưới CSS. Phương pháp bố cục này liên quan đến việc chỉ định một số lớp CSS để căn chỉnh nội dung trang theo cấu trúc lưới. Nó liên quan chặt chẽ hơn đến bố cục in-bit hơn là dựa trên web, nhưng nó là một kỹ thuật được sử dụng trên rất nhiều trang web để bố trí nội dung thành một cấu trúc mà không cần phải sử dụng đến các bảng.
Hãy thử điều này để bắt đầu từ Smashing Magazine.
Nhìn vào thuộc tính Float css. http://w3schools.com/css/pr_class_float.asp
Nó hoạt động với các phần tử khối như div. Ngoài ra, những gì bạn đang cố gắng hiển thị, bảng không phải là xấu nếu bạn thực sự đang cố gắng hiển thị một bảng thông tin nào đó.
<!-- CSS -->
<style rel="stylesheet" type="text/css">
.all { display: table; }
.menu { float: left; width: 30%; }
.content { margin-left: 35%; }
</style>
<!-- HTML -->
<div class="all">
<div class="menu">Menu</div>
<div class="content">Content</div>
</div>
khác ... cố gắng sử dụng float: left;hoặc right;, thay đổi widthcác giá trị khác ... nó hoạt động tốt ... cũng lưu ý rằng 10% không được sử dụng bởi div của nó đã đặt cược cho chúng ... xin lỗi vì tiếng Anh không tốt :)