关于已个CSS布局该怎么写的问题
今天写了一个简单的布局，然而写完之后觉得CSS文件真心丑哭我，写的太烂了，先说说效果页面：……算了，直接上图吧。
呐，就是这样子啦。
再看看代码：
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
#box{
width:900px;
height:800px;
margin:auto;
background-color:#ccc;
}
#left{
width:450px;
height:800px;
margin:0px;
background-color:red;
}
#right{
width:450px;
height:800px;
margin-left:450px;
margin-top:-800px;
background-color:blue;
}
#middle{
margin:-625px auto auto auto;
width:450px;
height:450px;
background-color:#ccc;
}
</style>
</head>
<body>
<div id="box">
<div id="left"></div>
<div id="right"></div>
</div>
<div id="middle"></div>
</body>
</html>
表示自己感觉这CSS写的很不好，虽然效果是实现了。各位大神，如果是你们写这个，会是什么样子的？或者你们觉得这个有哪里是需要改的（好啦好啦，写的跟翔一样是吧，我知道啦(￢_￢)）。自己感觉选择器right里的CSS写的很没水准。还有middle里面的margin也不是很好（都不知道为什么是-800px，我只是一点点看着界面改出来的）……求大师指点啊
白、夜茶ぃ默
8 years, 9 months ago
Answers
<!DOCTYPE html>
<head>
<style type="text/css">
#box {
position:relative;
width:900px;
height:800px;
margin: auto;
}
#left {
width:450px;
height:800px;
float: left;
background-color:red;
}
#right {
width:450px;
height:800px;
float:right;
background-color:blue;
}
#middle {
position: absolute;
top:50%;
left:50%;
margin-top: -225px;
margin-left: -225px;
width:450px;
height:450px;
background-color:#ccc;
}
</style>
<head>
<body>
<div id="box">
<div id="left"></div>
<div id="right"></div>
<div id="middle"></div>
</div>
</body
<html>
用定位的话，我大概会这么写
middle元素垂直居中水平居中的方法我采用的是，先绝对定位到50%，然后再margin过去它宽高的负一半。
4679545
answered 8 years, 9 months ago
html:
<div class="outer">
<div class="left_half"></div>
<div class="right_half"></div>
<div class="middle"></div>
</div>
css
.outer{
width: 700px;
height: 500px;
margin: 0 auto;
position: relative;
}
.left_half{
width: 50%;
height: 100%;
background: red;
float: left;
}
.right_half{
width: 50%;
height: 100%;
background: yellow;
float: left;
}
.middle{
width: 200px;
height: 200px;
background: pink;
position: absolute;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -100px;
}
醉拳甘乃迪
answered 8 years, 9 months ago
如果你的红蓝两块区域不需要填内容，你可以试试下面的方法
HTML:
<div class='centered-block'>
<div>这里是中间的灰色区域</div>
</div>
Style:
.centered-block {
width: 800px; //不是必须的
height: 600px; //不是必须的
font-size: 0; //必须的，用来解决换行引起的间隔问题
text-align: center; //必须的，用来水平居中
background: linear-gradient(to right, red 0%, red 50%, blue 50%, blue 100%);
//注意下我没有写浏览器的兼容写法
}
.centered-block::before {
content: ''; //必须的
display: inline-block; //必须的
vertical-align: middle; //必须的，用来垂直居中的
height: 100%; //必须的
width: 0; //必须的
}
.centered-block>* {
display: inline-block; //必须的
vertical-align: middle; //必须的
font-size: 1rem; //必须的，用来重置回字体，这里不能使用相对父节点的单位，比如em，％
margin: 0 auto; // 非必须，水平居中的辅助写法
//以下均为非必须
background: gray;
color: white;
width: 300px;
height: 200px;
}
注:
-
以上注释是按js注释来的，看的时候不必在意
-
样式是响应式的，写法对less，sass此类预编译语言友好
-
人非圣贤，孰能无错，权当借鉴
指着天空说.日
answered 8 years, 9 months ago
css
*{
margin:0px;
padding:0px;
}
#box{
width:900px;
height:800px;
margin:auto;
background-color:#ccc;
position:relative;
}
#left{
width:450px;
height:800px;
display: inline-block;
background-color:red;
}
#right{
width:450px;
height:800px;
display: inline-block;
background-color:blue;
}
#middle{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
width:450px;
height:450px;
background-color:#ccc;
}
html
<div id="box">
<div id="left">
</div><div id="right">
</div>
<div id="middle"></div>
</div>
</div><div id="right">这俩必须连着，否则inline-block会有间隙
@非常喜欢
answered 8 years, 9 months ago
html:
<div id="box">
<div id="left"></div>
<div id="right"></div>
<div id="middle"></div>
</div>
css:
*{padding: 0;margin: 0;}
#box{
width: 400px;
height: 300px;
position: relative;
}
#left{
width: 50%;
height: 100%;
float: left;
background: red;
}
#right{
width: 50%;
height: 100%;
float: right;
background: blue;
}
#middle{
background: grey;
width: 200px;
height: 200px;
position: absolute;
top:16%;
left:25%
}
你怎么用margin定位，我这个居中是有点问题的额，直接数值居中，有兴趣可以研究下居中的问题
magito
answered 8 years, 9 months ago
传统写法 ：
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
.container{
font-size:0;
height:500px;
width:500px;
margin:0 auto;
position: relative;
}
.middle{
position: absolute;
top:50%;
left:50%;
margin-top:-25%;
margin-left:-25%;
width:50%;
height:50%;
background-color: black;
}
.left{
display: inline-block;
width:50%;
height:100%;
background-color: red;
}
.right{
display: inline-block;
width:50%;
height:100%;
background-color: blue;
}
</style>
</head>
<body>
<div class="container">
<div class="middle"></div>
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
松山爱妹妹
answered 8 years, 9 months ago
两列等宽布局最优的方案应该是flexbox，简单明了的核心代码如下：
#box{
display: flex;
}
#left{
flex: 1;
}
#right{
flex: 1;
}
https://jsfiddle.net/Alsiso/ru0q2bjx/
但是flexbox的对浏览器支持有限，仅支持11.0+，还要使用前缀加属性值来得到最好的兼容
mlgb阿根廷
answered 8 years, 9 months ago
