73
Mới! Lưu câu hỏi hoặc câu trả lời và sắp xếp nội dung yêu thích của bạn. Tìm hiểu thêm.
Learn more.
Tôi đang tạo một trang web mẫu có ba bộ phận theo chiều ngang. Tôi muốn phần lớn div bên trái có chiều rộng 25%, phần giữa có chiều rộng 50% và bên phải có chiều rộng 25% để các bộ phận lấp đầy tất cả không gian 100% theo chiều ngang.
<html> <title> Website Title </title> <div id="the whole thing" style="height:100%; width:100%" > <div id="leftThing" style="position: relative; width:25%; background-color:blue;"> Left Side Menu </div> <div id="content" style="position: relative; width:50%; background-color:green;"> Random Content </div> <div id="rightThing" style="position: relative; width:25%; background-color:yellow;"> Right Side Menu </div> </div> </html>//imgur.com/j4cJu
Khi tôi thực thi mã này, các div xuất hiện trên nhau. Tôi muốn họ xuất hiện bên cạnh nhau!
Tôi có thể làm cái này như thế nào?
Lukas Kabrt
5.3714 Huy hiệu vàng42 Huy hiệu bạc58 Huy hiệu Đồng4 gold badges42 silver badges58 bronze badges
Hỏi ngày 13 tháng 8 năm 2012 lúc 9:06Aug 13, 2012 at 9:06
5
Tôi không sử dụng phao cho loại điều này; Tôi muốn sử dụng <!DOCTYPE html> <html> <head> <title>Website Title</title> <style type="text/css"> * {margin: 0; padding: 0;} #container {height: 100%; width:100%; font-size: 0;} #left, #middle, #right {display: inline-block; *display: inline; zoom: 1; vertical-align: top; font-size: 12px;} #left {width: 25%; background: blue;} #middle {width: 50%; background: green;} #right {width: 25%; background: yellow;} </style> </head> <body> <div id="container"> <div id="left">Left Side Menu</div> <div id="middle">Random Content</div> <div id="right">Right Side Menu</div> </div> </body> </html> 1.
Một số điểm khác để xem xét:
- Phong cách nội tuyến là xấu cho khả năng duy trì
- Bạn không nên có khoảng trống trong tên bộ chọn
- Bạn đã bỏ lỡ một số thẻ HTML quan trọng, như <!DOCTYPE html> <html> <head> <title>Website Title</title> <style type="text/css"> * {margin: 0; padding: 0;} #container {height: 100%; width:100%; font-size: 0;} #left, #middle, #right {display: inline-block; *display: inline; zoom: 1; vertical-align: top; font-size: 12px;} #left {width: 25%; background: blue;} #middle {width: 50%; background: green;} #right {width: 25%; background: yellow;} </style> </head> <body> <div id="container"> <div id="left">Left Side Menu</div> <div id="middle">Random Content</div> <div id="right">Right Side Menu</div> </div> </body> </html> 2 và <!DOCTYPE html> <html> <head> <title>Website Title</title> <style type="text/css"> * {margin: 0; padding: 0;} #container {height: 100%; width:100%; font-size: 0;} #left, #middle, #right {display: inline-block; *display: inline; zoom: 1; vertical-align: top; font-size: 12px;} #left {width: 25%; background: blue;} #middle {width: 50%; background: green;} #right {width: 25%; background: yellow;} </style> </head> <body> <div id="container"> <div id="left">Left Side Menu</div> <div id="middle">Random Content</div> <div id="right">Right Side Menu</div> </div> </body> </html> 3
- Bạn đã không bao gồm một <!DOCTYPE html> <html> <head> <title>Website Title</title> <style type="text/css"> * {margin: 0; padding: 0;} #container {height: 100%; width:100%; font-size: 0;} #left, #middle, #right {display: inline-block; *display: inline; zoom: 1; vertical-align: top; font-size: 12px;} #left {width: 25%; background: blue;} #middle {width: 50%; background: green;} #right {width: 25%; background: yellow;} </style> </head> <body> <div id="container"> <div id="left">Left Side Menu</div> <div id="middle">Random Content</div> <div id="right">Right Side Menu</div> </div> </body> </html> 4
Đây là một cách tốt hơn để định dạng tài liệu của bạn:
<!DOCTYPE html> <html> <head> <title>Website Title</title> <style type="text/css"> * {margin: 0; padding: 0;} #container {height: 100%; width:100%; font-size: 0;} #left, #middle, #right {display: inline-block; *display: inline; zoom: 1; vertical-align: top; font-size: 12px;} #left {width: 25%; background: blue;} #middle {width: 50%; background: green;} #right {width: 25%; background: yellow;} </style> </head> <body> <div id="container"> <div id="left">Left Side Menu</div> <div id="middle">Random Content</div> <div id="right">Right Side Menu</div> </div> </body> </html>Đây là một jsfiddle cho biện pháp tốt.
Đã trả lời ngày 13 tháng 8 năm 2012 lúc 9:21Aug 13, 2012 at 9:21
Jezen Thomasjezen ThomasJezen Thomas
13.4K6 Huy hiệu vàng52 Huy hiệu bạc90 Huy hiệu Đồng6 gold badges52 silver badges90 bronze badges
2
Tôi biết đây là một câu hỏi rất cũ. Chỉ cần đăng bài này ở đây khi tôi giải quyết vấn đề này bằng FlexBox. Đây là giải pháp
#container { height: 100%; width: 100%; display: flex; } #leftThing { width: 25%; background-color: blue; } #content { width: 50%; background-color: green; } #rightThing { width: 25%; background-color: yellow; }<div id="container"> <div id="leftThing"> Left Side Menu </div> <div id="content"> Random Content </div> <div id="rightThing"> Right Side Menu </div> </div>
Chỉ cần thêm <!DOCTYPE html> <html> <head> <title>Website Title</title> <style type="text/css"> * {margin: 0; padding: 0;} #container {height: 100%; width:100%; font-size: 0;} #left, #middle, #right {display: inline-block; *display: inline; zoom: 1; vertical-align: top; font-size: 12px;} #left {width: 25%; background: blue;} #middle {width: 50%; background: green;} #right {width: 25%; background: yellow;} </style> </head> <body> <div id="container"> <div id="left">Left Side Menu</div> <div id="middle">Random Content</div> <div id="right">Right Side Menu</div> </div> </body> </html> 5 vào container! Không cần phao cần thiết.
Đã trả lời ngày 24 tháng 10 năm 2016 lúc 3:07Oct 24, 2016 at 3:07
Maazadeebmaazadeebmaazadeeb
5.7122 Huy hiệu vàng27 Huy hiệu bạc39 Huy hiệu Đồng2 gold badges27 silver badges39 bronze badges
Bạn có thể sử dụng các yếu tố nổi như vậy:
<div id="the whole thing" style="height:100%; width:100%; overflow: hidden;"> <div id="leftThing" style="float: left; width:25%; background-color:blue;">Left Side Menu</div> <div id="content" style="float: left; width:50%; background-color:green;">Random Content</div> <div id="rightThing" style="float: left; width:25%; background-color:yellow;">Right Side Menu</div> </div>Lưu ý tràn: ẩn; Trên thùng chứa cha mẹ, điều này là làm cho cha mẹ phát triển có cùng kích thước với các phần tử con (nếu không nó sẽ có chiều cao 0).overflow: hidden; on the parent container, this is to make the parent grow to have the same dimensions as the child elements (otherwise it will have a height of 0).
Đã trả lời ngày 13 tháng 8 năm 2012 lúc 9:09Aug 13, 2012 at 9:09
Paul Aldred-Bannpaul Aldred-BannPaul Aldred-Bann
5.7204 Huy hiệu vàng36 Huy hiệu bạc54 Huy hiệu Đồng4 gold badges36 silver badges54 bronze badges
2
Cách dễ nhất
Tôi có thể thấy câu hỏi được trả lời, tôi đang đưa ra câu trả lời này cho những người đang có câu hỏi này trong tương lai
Đó không phải là thực tế tốt để mã nội tuyến CSS và ID cho tất cả các div bên trong, luôn cố gắng sử dụng lớp để tạo kiểu. Sử dụng CSS nội tuyến là một thực tiễn rất tệ nếu bạn đang cố gắng trở thành một nhà thiết kế web chuyên nghiệp.ID for all inner div's , always try to use class for styling .Using inline css is a very bad practise if you are trying to be a professional web designer.
Ở đây trong câu hỏi của bạn, tôi đã đưa ra một lớp trình bao bọc cho Div cha mẹ và tất cả các div bên trong là con div của trẻ em trong CSS mà bạn có thể gọi bên trong Div bằng cách sử dụng bộ chọn NTH-con.nth-child selector.
Tôi muốn chỉ ra một vài điều ở đây
Không sử dụng CSS nội tuyến (đó là thực tế rất tệ)
Cố gắng sử dụng các lớp thay vì ID vì nếu bạn cung cấp ID, bạn chỉ có thể sử dụng nó một lần, nhưng nếu bạn sử dụng một lớp, bạn có thể sử dụng nó nhiều lần và bạn cũng có thể tạo kiểu cho chúng bằng cách sử dụng lớp đó để bạn viết ít mã hơn.
Liên kết codepen cho câu trả lời của tôi
//codepen.io/feizel/pen/JELGyB
.wrapper { width: 100%; } .box { float: left; height: 100px; } .box:nth-child(1) { width: 25%; background-color: red; } .box:nth-child(2) { width: 50%; background-color: green; } .box:nth-child(3) { width: 25%; background-color: yellow; }<div class="wrapper"> <div class="box"> Left Side Menu </div> <div class="box"> Random Content </div> <div class="box"> Right Side Menu </div> </div>
MPLUNGJAN
160K27 Huy hiệu vàng168 Huy hiệu bạc226 Huy hiệu Đồng27 gold badges168 silver badges226 bronze badges
Đã trả lời ngày 1 tháng 2 năm 2017 lúc 17:21Feb 1, 2017 at 17:21
0
Bạn thêm a
float: left;Theo phong cách của 3 yếu tố và đảm bảo container cha mẹ có
overflow: hidden; position: relative;Điều này đảm bảo các phao chiếm không gian thực tế.
<html> <head> <title>Website Title </title> </head> <body> <div id="the-whole-thing" style="position: relative; overflow: hidden;"> <div id="leftThing" style="position: relative; width: 25%; background-color: blue; float: left;"> Left Side Menu </div> <div id="content" style="position: relative; width: 50%; background-color: green; float: left;"> Random Content </div> <div id="rightThing" style="position: relative; width: 25%; background-color: yellow; float: left;"> Right Side Menu </div> </div> </body> </html>Ngoài ra, xin lưu ý rằng chiều rộng: 100% và chiều cao: 100% cần được loại bỏ khỏi container, nếu không khối thứ 3 sẽ kết thúc thành một dòng thứ 2.
Đã trả lời ngày 13 tháng 8 năm 2012 lúc 9:12Aug 13, 2012 at 9:12
NKCSSNKCSSNKCSS
2.7181 Huy hiệu vàng21 Huy hiệu bạc37 Huy hiệu đồng1 gold badge21 silver badges37 bronze badges
Loại bỏ <!DOCTYPE html> <html> <head> <title>Website Title</title> <style type="text/css"> * {margin: 0; padding: 0;} #container {height: 100%; width:100%; font-size: 0;} #left, #middle, #right {display: inline-block; *display: inline; zoom: 1; vertical-align: top; font-size: 12px;} #left {width: 25%; background: blue;} #middle {width: 50%; background: green;} #right {width: 25%; background: yellow;} </style> </head> <body> <div id="container"> <div id="left">Left Side Menu</div> <div id="middle">Random Content</div> <div id="right">Right Side Menu</div> </div> </body> </html> 6 và thay thế nó bằng <!DOCTYPE html> <html> <head> <title>Website Title</title> <style type="text/css"> * {margin: 0; padding: 0;} #container {height: 100%; width:100%; font-size: 0;} #left, #middle, #right {display: inline-block; *display: inline; zoom: 1; vertical-align: top; font-size: 12px;} #left {width: 25%; background: blue;} #middle {width: 50%; background: green;} #right {width: 25%; background: yellow;} </style> </head> <body> <div id="container"> <div id="left">Left Side Menu</div> <div id="middle">Random Content</div> <div id="right">Right Side Menu</div> </div> </body> </html> 7 và <!DOCTYPE html> <html> <head> <title>Website Title</title> <style type="text/css"> * {margin: 0; padding: 0;} #container {height: 100%; width:100%; font-size: 0;} #left, #middle, #right {display: inline-block; *display: inline; zoom: 1; vertical-align: top; font-size: 12px;} #left {width: 25%; background: blue;} #middle {width: 50%; background: green;} #right {width: 25%; background: yellow;} </style> </head> <body> <div id="container"> <div id="left">Left Side Menu</div> <div id="middle">Random Content</div> <div id="right">Right Side Menu</div> </div> </body> </html> 8.
Ví dụ trong jsfiddle: //jsfiddle.net/d9fhp/1/
<!DOCTYPE html> <html> <head> <title>Website Title</title> <style type="text/css"> * {margin: 0; padding: 0;} #container {height: 100%; width:100%; font-size: 0;} #left, #middle, #right {display: inline-block; *display: inline; zoom: 1; vertical-align: top; font-size: 12px;} #left {width: 25%; background: blue;} #middle {width: 50%; background: green;} #right {width: 25%; background: yellow;} </style> </head> <body> <div id="container"> <div id="left">Left Side Menu</div> <div id="middle">Random Content</div> <div id="right">Right Side Menu</div> </div> </body> </html> 0Đã trả lời ngày 13 tháng 8 năm 2012 lúc 9:12Aug 13, 2012 at 9:12
NKCSSNKCSSMNilson
2.7181 Huy hiệu vàng21 Huy hiệu bạc37 Huy hiệu đồng1 silver badge8 bronze badges