[英]Half-half css layout padding and positioning problem
Greetings, 问候,
I am trying to create a simple two-column layout: left half one colour, right half another colour with all the text aligned to the middle of the screen. 我正在尝试创建一个简单的两列布局:左半边一种颜色,右半边另一种颜色,所有文本都对齐到屏幕中间。
I have two problems I cannot find obvious solutions for (my css skills are poor): 我有两个问题,我找不到明显的解决方案(我的CSS技能很差):
Here is the current css: 这是当前的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;
}
Here is html: 这是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>
Thank you alot! 非常感谢!
@rince @rince
for white border just write 对于白色边框,只需写
body{
margin:0;
padding:0;
}
or use reset sheet
because some browser gave default padding to the body 或使用
reset sheet
因为某些浏览器为正文提供了默认填充
& 和
2 . 2。 if you given padding to the column or any object it's add width to it so,decrease height & width according to the padding .
如果为列或任何对象提供了填充,则添加了宽度,请根据padding减小高度和宽度。
for example : if width:100px;
例如:if
width:100px;
& when we add padding-left:10px;
&当我们添加
padding-left:10px;
to it .Then we written width:90px;
然后我们写出
width:90px;
instead of 100px
而不是
100px
To remove the 'white border' around the div
s you can apply: 要删除
div
周围的“白色边框”,您可以应用:
body {
padding: 0;
}
and to allow for padding within the div
s, I'd suggest wrapping the text in p
tags, and applying either a margin (JS Fiddle demo) , or padding (JS Fiddle demo) , to those. 为了允许在
div
内进行填充,我建议将文本包装在p
标签中,然后p
标签应用margin(JS Fiddle演示)或padding(JS Fiddle演示) 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.