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

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。 如果为列或任何对象提供了填充，则添加了宽度，请根据padding减小高度和宽度。

例如：if width:100px; ＆当我们添加padding-left:10px; 然后我们写出width:90px; 而不是100px

Answer 2

要删除div周围的“白色边框”，您可以应用：

body {
    padding: 0;
}

为了允许在div内进行填充，我建议将文本包装在p标签中，然后p标签应用margin（JS Fiddle演示）或padding（JS Fiddle演示）。

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

问题描述

2 个解决方案

解决方案1
2 2011-04-03 16:23:34

解决方案2
1 已采纳 2011-04-03 16:22:43

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

问题描述

2 个解决方案

解决方案1 2 2011-04-03 16:23:34

解决方案2 1 已采纳 2011-04-03 16:22:43

解决方案1
2 2011-04-03 16:23:34

解决方案2
1 已采纳 2011-04-03 16:22:43