半個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