半生CSS布局填充和定位的问题

2011-04-03 44 views 0 likes

我试图创建一个简单的两栏布局：左半一种颜色，右半另一种颜色的所有对准屏幕中间的文本。

我有两个问题，我无法找到（我的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>

谢谢了很多！

来源

2011-04-03 Rince

回答

要删除“白边”围绕div是你可以申请：

body { 
    padding: 0; 
}

，并允许div秒钟内填充，我建议在包装标签p文本，无论是应用一个margin (JS Fiddle demo)或padding (JS Fiddle demo)，那些。

来源

2011-04-03 16:22:43

@rince

为白色边框只写

body{ 
    margin:0; 
    padding:0; 
}

，或者使用reset sheet因为一些浏览器给默认填充到体内

2。如果你给填充到列或任何对象是添加宽度会这样，根据填补减少的高度&宽度。

例如：如果width:100px; &当我们添加padding-left:10px;给它。然后我们写的，而不是width:90px;100px

来源

2011-04-03 16:23:34 sandeep

半生CSS布局填充和定位的问题

回答

相关问题