Trong một vài thiết kế layout web bạn cần phải trình bày một số thẻ div nằm liền kề nhau theo chiều dọc có vị trí nằm ở giữa màn hình trình duyệt web. Ví dụ table div, bảng giá cả, cột div,.... Bài viết này sẽ giới thiệu một cách dùng CSS để làm điều trên một cách dễ dàng.
Dưới đây là đoạn mà CSS đơn giả để thực hiện công việc trên.
Còn đây là mã HTML cho the div cần cần bố trí.
Bạn có thể xem demo tại http://jsfiddle.net/bnson/e4934390/
The below full source code page.
Nếu có bất kỳ thắc mặc nào? Hãy thảo luận với tôi tại đây.
Dưới đây là đoạn mà CSS đơn giả để thực hiện công việc trên.
.centerDiv {
width: 60%;
height:150px;
margin: 0 auto;
background-color:#FFA500;
}
.div1 {
width: 50%;
height:100%;
background-color:#A52A2A;
float:left;
text-align:center;
}
.div2 {
width: 50%;
height:100%;
background-color:#FFA500 ;
float:left;
text-align:center;
}
width: 60%;
height:150px;
margin: 0 auto;
background-color:#FFA500;
}
.div1 {
width: 50%;
height:100%;
background-color:#A52A2A;
float:left;
text-align:center;
}
.div2 {
width: 50%;
height:100%;
background-color:#FFA500 ;
float:left;
text-align:center;
}
Còn đây là mã HTML cho the div cần cần bố trí.
<div class="centerDiv">
<div class="div1">
bnson.blogspot.com<br />
bnson.blogspot.com<br />
bnson.blogspot.com<br />
</div>
<div class="div2">
bnson.blogspot.com<br />
bnson.blogspot.com<br />
bnson.blogspot.com<br />
</div>
</div>
<div class="div1">
bnson.blogspot.com<br />
bnson.blogspot.com<br />
bnson.blogspot.com<br />
</div>
<div class="div2">
bnson.blogspot.com<br />
bnson.blogspot.com<br />
bnson.blogspot.com<br />
</div>
</div>
Bạn có thể xem demo tại http://jsfiddle.net/bnson/e4934390/
The below full source code page.
---
<!DOCTYPE html>
<html >
<head>
<title>http://bnson.blogspot.com/</title>
<style type="text/css">
.centerDiv {
width: 60%;
height:150px;
margin: 0 auto;
background-color:#FFA500;
}
.div1 {
width: 50%;
height:100%;
background-color:#A52A2A;
float:left;
text-align:center;
}
.div2 {
width: 50%;
height:100%;
background-color:#FFA500 ;
float:left;
text-align:center;
}
</style>
</head>
<body>
<div class="centerDiv">
<div class="div1">
bnson.blogspot.com<br />
bnson.blogspot.com<br />
bnson.blogspot.com<br />
</div>
<div class="div2">
bnson.blogspot.com<br />
bnson.blogspot.com<br />
bnson.blogspot.com<br />
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html >
<head>
<title>http://bnson.blogspot.com/</title>
<style type="text/css">
.centerDiv {
width: 60%;
height:150px;
margin: 0 auto;
background-color:#FFA500;
}
.div1 {
width: 50%;
height:100%;
background-color:#A52A2A;
float:left;
text-align:center;
}
.div2 {
width: 50%;
height:100%;
background-color:#FFA500 ;
float:left;
text-align:center;
}
</style>
</head>
<body>
<div class="centerDiv">
<div class="div1">
bnson.blogspot.com<br />
bnson.blogspot.com<br />
bnson.blogspot.com<br />
</div>
<div class="div2">
bnson.blogspot.com<br />
bnson.blogspot.com<br />
bnson.blogspot.com<br />
</div>
</div>
</body>
</html>
Nếu có bất kỳ thắc mặc nào? Hãy thảo luận với tôi tại đây.
No comments:
Post a Comment