Một vài trường hợp thiết kế layout web bạn cần tạo một vài thể div nằm liền kề nhau theo dọc và bạn muốn trình bày nó tại vị trí top-center của cửa sổ trình duyệt web.
Dưới đây là đoạn mã CSS đơn giản để thực hiện công việc trên.
Còn đây là mã HTML của các the divs cần bố trí, bạn chỉ việc thêm vào nó các class name tương ứng mã CSS là được.
Bạn có thể xem demo tại http://jsfiddle.net/bnson/uq3oarf8/:
Dưới full source của bài hướng dẫn này.
Bất kỳ câu hỏi nào, đừng ngần ngại hãy contact tới tôi.
Dưới đây là đoạn mã CSS đơn giản để thực hiện công việc trên.
.centerDiv {
width: 60%;
height: 100px;
margin: 0 auto;
}
.div1 {
width: 30%;
border: 1px solid #000000;
height:100%;
float:left;
background-color:white;
}
.div1.red {
background-color:red;
}
.div1.blue {
background-color:blue;
}
.div1.yellow {
background-color:yellow;
}
width: 60%;
height: 100px;
margin: 0 auto;
}
.div1 {
width: 30%;
border: 1px solid #000000;
height:100%;
float:left;
background-color:white;
}
.div1.red {
background-color:red;
}
.div1.blue {
background-color:blue;
}
.div1.yellow {
background-color:yellow;
}
Còn đây là mã HTML của các the divs cần bố trí, bạn chỉ việc thêm vào nó các class name tương ứng mã CSS là được.
<div class="centerDiv">
<div class="div1 red">
</div>
<div class="div1 blue">
</div>
<div class="div1 yellow">
</div>
</div>
<div class="div1 red">
</div>
<div class="div1 blue">
</div>
<div class="div1 yellow">
</div>
</div>
Bạn có thể xem demo tại http://jsfiddle.net/bnson/uq3oarf8/:
Dưới full source của bài hướng dẫn này.
<!DOCTYPE html>
<html >
<head>
<title>http://bnson.blogspot.com/</title>
<style type="text/css">
.centerDiv {
width: 60%;
height: 100px;
margin: 0 auto;
}
.div1 {
width: 30%;
border: 1px solid #000000;
height:100%;
float:left;
background-color:white;
}
.div1.red {
background-color:red;
}
.div1.blue {
background-color:blue;
}
.div1.yellow {
background-color:yellow;
}
</style>
</head>
<body>
<div class="centerDiv">
<div class="div1 red">
</div>
<div class="div1 blue">
</div>
<div class="div1 yellow">
</div>
</div>
</body>
</html>
<html >
<head>
<title>http://bnson.blogspot.com/</title>
<style type="text/css">
.centerDiv {
width: 60%;
height: 100px;
margin: 0 auto;
}
.div1 {
width: 30%;
border: 1px solid #000000;
height:100%;
float:left;
background-color:white;
}
.div1.red {
background-color:red;
}
.div1.blue {
background-color:blue;
}
.div1.yellow {
background-color:yellow;
}
</style>
</head>
<body>
<div class="centerDiv">
<div class="div1 red">
</div>
<div class="div1 blue">
</div>
<div class="div1 yellow">
</div>
</div>
</body>
</html>
Bất kỳ câu hỏi nào, đừng ngần ngại hãy contact tới tôi.
No comments:
Post a Comment