获得背景色上的div

.wrapper { 
 
height:1200px; 
 
width:800px; 
 
overflow: auto; 
 
background:green; 
 
padding-top: 0px; 
 
padding-bottom: 0px; 
 
padding-left: 0px; 
 
padding-right: 0px; 
 

 
} 
 

 
.sidebar { 
 
background:grey; 
 
position:absolute; 
 
left:10%; 
 
top:0px; 
 
bottom:0px; 
 
width:20%; 
 
height:100%; 
 
float:left; 
 
} 
 

 
.content { 
 
background:blue; 
 
position:absolute; 
 
left:30%; 
 
right:0px; 
 
top:0px; 
 
bottom:0px; 
 
width:70%; 
 
float:left; 
 
} 
 

 
body { 
 
padding-top: 0px; 
 
padding-bottom: 0px; 
 
padding-left: 0px; 
 
padding-right: 0px; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title>Steven game dev</title> 
 
\t <link rel="stylesheet" type="text/css" href="style2.css"/> 
 
</head> 
 
<body> 
 
\t <div class="wrapper"> 
 
\t <div class="sidebar"> 
 
\t \t <a href="home.html">Home</a> 
 
     \t \t <br> 
 
     \t \t <a href="page2.html">About</a> 
 
     \t \t <br> 
 
     \t \t <a href="page3.html">Blog</a> 
 
     \t \t <br> 
 
     \t \t <a href="page2.html">Videos</a> 
 
     \t \t <br> 
 
     \t \t <a href="page2.html">Pictures</a> 
 
     \t \t <br> 
 
     \t \t <a href="page2.html">Contact</a> 
 
\t </div> 
 
\t <div class="content"> 
 
\t </div> 
 
\t </div> 
 
</body> 
 

 
\t 
 
</html>

工作，大家好我是新这样下去容易在我身上。我决定组建一个快速网站，这是我多年来没有做过的事情，结果我几乎忘记了一切，但我认为这会很容易滑回去。由于某种原因，我错了，我不能添加背景颜色我的一个Divs。该div是在一个容器div内，这可能是我遇到麻烦的原因，但我相当肯定，这不应该是以前做过很多次的问题。问题的div是我的边栏我不明白为什么它很难，但我已经尝试了很多东西来补救它，我不能得到它的工作。请原谅我的CSS的马虎性质我只是很快试图阻止divs，以便我可以看到我在做什么。任何帮助将不胜感激我确信这是我错过的愚蠢东西，但这是基本的东西应该很容易。

来源

2017-04-25 moderategamer

查看您的代码片段仅显示灰色容器，而不是橙色侧边栏。在小提琴中查看您的代码显示橙色，并隐藏灰色，奇怪。无论如何，尝试删除灰色的背景颜色，看看是否通过橙色。请注意，我发现边框更容易识别元素大小，因为它们不会像背景色那样重叠。 – mrkd1991

严重的是，这是一个谜，但我得到它的工作。这里是解决方案：

#sidebar { 
    height: 100%; 
    width: 50%; 
    background-color:orange; 
    float:left; 
}

“但是等等”，我听到你说，“这是相同的代码！”。显然不是。在width: 50%;和background-color: orange;之间是一个我看不到的字符，但它停止了背景色的工作。

测试代码片段时，我最终删除并重新输入了代码，这是我在遇到绝望时所做的事情。

来源

2017-04-25 11:43:19 Manngo

感谢它真的很奇怪我认为记事本++拖动我，因为我手工输入所有这些，我看不到任何隐藏的字符，要么我认为我会切换回老的普通记事本看看是否改变似乎是任何东西我输入的所有内容都不起作用，但是当我粘贴东西时，他们再次感谢非常感谢的帮助。 – moderategamer

这是奇怪的切换到记事本，突然一切正常！？ – moderategamer

@moderategamer在那里，做到了，买了明信片。 Notepad ++通常非常好（我没有正常使用Windows，所以我没有任何近期的经验）。有时重新打字突显了一个错字，但有时候只是这个烦人的无形字符。出于好奇，可能值得在N ++中展示无形的角色来测试这个理论。如果这回答了您的问题，您是否愿意接受答案？ – Manngo

-1

我认为你正在寻找一个侧栏导航菜单尝试我的代码如下。我还推荐以下https://www.w3schools.com/w3css/w3css_sidebar.asp和http://jsfiddle.net/coltrane/cxQGc/。

<!DOCTYPE html> 
<html> 
    <head> 
     <title></title> 
    </head> 
    <body> 
     <div class="sidebar"> 
      <a href="page2.html">Home</a> 
      <br> 
      <a href="page2.html">About</a> 
      <br> 
      <a href="page2.html">Blog</a> 
      <br> 
      <a href="page2.html">Videos</a> 
      <br> 
      <a href="page2.html">Pictures</a> 
      <br> 
      <a href="page2.html">Contact</a> 
     </div> 
     <div class="content"> 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
      proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
     </div> 
    </body> 
</html> 
<style type="text/css"> 
.sidebar { 
    background: orange; 
    position: absolute; 
    left: 0; 
    top: 0px; 
    bottom: 0; 
    width: 178px; 
} 

.content { 
    background: red; 
    position: absolute; 
    left: 178px; 
    right: 0; 
    top: 0px; 
    bottom: 0; 
} 
</style>

来源

2017-04-25 02:21:03 Ace

感谢您的答案我仍然不明白为什么它不工作，但有任何想法。 – moderategamer

在背景颜色之前有空白字符：橙色。所以浏览器认为它的名字是[whitespace] [whitespace]无法识别的背景色。我知道这一点，因为我查看了devtools中的#sidebar元素，并得到unrecognized rule: background-color，这只有在该字符串中存在一些不可见的空白时才有意义。发现你的草率的CSS写作是不可原谅的！

#sidebar \t { 
 
    height: 100%; 
 
    width: 50%; 
 
    background: orange; 
 
    float:left; 
 
} 
 

 
#container { 
 
    height: 800px; 
 
    width: 100%;    
 
    float:left; 
 
    background-color: grey; 
 
    padding-left:0px; 
 
    padding-right:0px; 
 
    padding-top:0px; 
 
    padding-bottom:0px; 
 
} 
 

 
#content { 
 
    float: left; 
 
    background-color: red; 
 
    width:50%; 
 
    height:100%; 
 
} 
 
body { 
 
    height: 100%; 
 
    width: 100%; 
 
    padding-left:0px; 
 
    padding-right:0px; 
 
    padding-top:0px; 
 
    padding-bottom:0px; 
 
    background-color:blue; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <meta charset="utf-8"> 
 
\t <link rel="stylesheet" type="text/css" href="styledesign.css"/> 
 
</head> 
 
\t <title> 
 
Steven game dev! 
 
\t </title> 
 

 
<div id ="container"> 
 
<div id ="sidebar"> 
 
<a href="page2.html">Home</a> 
 
<a href="page2.html">About</a> 
 
<a href="page2.html">Blog</a> 
 
<a href="page2.html">Videos</a> 
 
<a href="page2.html">Pictures</a> 
 
<a href="page2.html">Contact</a> 
 
</div> 
 
<div id ="content"> 
 

 
\t <h1>Welcome to my website take a look around </h1> 
 
\t <p> 
 
\t I'm a drop out game developer from the University of Abertay Dundee and I've decided to give it another go. 
 
\t Watch me learn game development along the way as I slowly build my first 3d game using the Unreal Engine 4. 
 
\t </p> 
 

 

 
\t 
 
\t <p> 
 
\t Here is some work I have been doing on particles. As you may have noticed the goal was to try and recreate the particles from the Legends of Zeld: Windwaker. 
 
\t I'm still learning but it's a start the basic principles are there still have to work on the debris that scatters of from the explosion with trails of smoke 
 
\t following behind using Tails in ue4 particles editor. 
 
\t </p> 
 
\t 
 
</div> 
 
</div> 
 

 

 
</html>

来源

2017-04-25 02:23:37

CSS中大多数额外的空间被忽略。唯一有意义的空格是（a）选择符中的一些空格，这些空格具有子选择器的效果，例如'ab {}'和（b）引号内属性的空格，例如'font-family：“Lucida Grande “'。背景颜色周围的空间不会产生影响。 – Manngo

@Manngo够公平的，它一定是另一个空白字符。因为当我查看开发人员工具时，我看到'无法识别的规则：背景颜色'。一旦我删除了“background-color”周围的空白，浏览器就会识别它。 –

获得背景色上的div

回答

相关问题