品字布局设计

最新推荐文章于 2025-05-22 22:11:18 发布

转载最新推荐文章于 2025-05-22 22:11:18 发布 · 225 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/haimengqingyuan/p/5453056.html

本文介绍了两种实现网页居中布局的方法：一是使用三个固定尺寸的区块，通过浮动和内联方式达到水平居中的效果；二是设置上方区块宽度为100%，下方两个区块各占50%宽度，并利用浮动阻止其换行。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

基本思路1：三块高宽是确定的；上面那块用margin: 0 auto;居中；下面两块用float或者inline-block不换行；用margin调整位置使他们居中。

<!DOCTYPE html>

<html>

<head lang="en">

<meta charset="UTF-8">

<title></title>

<style>

*{

margin: 0;

border: 0;

}

.d1, .d2, .d3{

height: 100px;

width: 100px;

background-color: #FF0000;

border: solid 1px #000000;

}

.d1{

margin: 0 auto;

}

.d3{

float: left;

margin-left: -200px;

}

.d2{

float: left;

margin-left: 50%;

}

</style>

</head>

<body>

<div class="d1">上</div>

<div class="d2">右</div>

<div class="d3">左</div>

</body>

</html>

基本思路2：上面的div宽100%，下面的两个div分别宽50%，然后用float或者inline或者inline-block使其不换行即可。

（1）

<!doctype>

<html>

<head>

</head>

<style>

margin:0;

padding: 0;

}

.main .left{

float:left;

height:50%;

width:50%;

}

.main .right{

height:50%;

}

.clear{

clear:both;

}

.header{

height:50%;

width:100%;

}

</style>

<body>

</div>

</body>

</html>

（2）

<!doctype>

<html>

<head>

</head>

<style>

margin:0;

padding: 0;

}

.left{

float:left;

height:50%;

width:50%;

}

.right{

height:50%;

}

.header{

height:50%;

width:100%;

}

</style>

<body>

</body>

</html>

转载于:https://www.cnblogs.com/haimengqingyuan/p/5453056.html