html - 半个半个css布局padding和定位问题

标签 html css layout

问候,

我正在尝试创建一个简单的双列布局:左边一半是一种颜色,右边一半是另一种颜色,所有文本都与屏幕中间对齐。

我有两个问题找不到明显的解决方案(我的 css 技能很差):

  1. div 周围的白色边框。
  2. 当我在列中引入文本填充时,它们会变大,无法彼此相邻,并且右列会折叠在左列下方。

这是当前的 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>

非常感谢!

最佳答案

@林斯

白边就写

body{
    margin:0;
    padding:0;
}

或者使用reset sheet因为一些浏览器给正文提供了默认的填充

&

2。如果你给列或任何对象添加填充,它会增加宽度,所以根据填充减少高度和宽度。

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

关于html - 半个半个css布局padding和定位问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5530736/

相关文章:

layout - Mathematica 中的 2 列文档

javascript - 无法以编程方式使用 Javascript 填充 iframe

html - 单击时将背景幻灯片设置为药丸

html - 我希望我的 div 的边界完全重叠,但是当我将它们与 flex 对齐时会变得奇怪

android - 类似 WhatsApp 的多行 EditText 布局和旁边的按钮

css - 这个 CSS 是如何工作的

html - 无法将 dd 推到左侧

javascript - jQuery:如何知道该元素在可排序的用户界面中被删除?

javascript - IOS发送暂停视频到html5

html - IE11 - border-radius 和 box-shadow 一起导致问题