Question

问候，

我正在尝试创建一个简单的双列布局：左半部分颜色，右半部分颜色，所有文本对齐到屏幕中间。

我有两个问题，我找不到明显的解决方案（我的css技能很差）：

div周围的白色边框。
当我向列引入文本填充时，它们会变大，不能彼此相邻，右列会在左下方折叠。

这是当前的css：

#left {
float:left;
width:50%;
height: 100%;
background-color:orange;
color:black;
text-align:right;
}
#right {
float:right;
width:50%;
height: 100%;
background-color:black;
color:orange;
}

这是html：

<html lang="en">
<head>
<title>Tucolor</title> 
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="left">bleh</div>
<div id="right">mleh</div>    
</body>
</html>

非常感谢！

Answer 1

@rince

白色边框只需写

body{
    margin:0;
    padding:0;
}

或使用reset sheet，因为某些浏览器为身体提供了默认填充

＆安培;

2。如果你给柱子或任何物体添加填充物，它会增加宽度，所以，减少高度＆amp;宽度根据填充。

例如：如果width:100px;＆amp;当我们向其添加padding-left:10px;时。然后我们写了width:90px;而不是100px

Answer 2

要移除div周围的“白色边框”，您可以申请：

body {
    padding: 0;
}

并允许在div内填充，我建议将文字包装在p代码中，然后应用margin (JS Fiddle demo)或padding (JS Fiddle demo)来那些。

半个css布局填充和定位问题

2 个答案: