Question

基本上，当我尝试在<div>之一中添加一个段落时，我遇到了麻烦。该页面似乎搞砸了。我的代码有什么问题吗？而且，我的代码需要改进的是什么？

谢谢！

＆＃13;

<!DOCTYPE HTML>
<html>
<style>
    * {
	  font-family: georgia;
	}
	body {
	   background-color: white;
	}
	#content {
	  width: 60%;
	  height: 1500px;
	  margin: auto;
	  
	  
	}
	#header {
	  height: 200px;
	  border: 1px dashed;
	  background-color: #44424D;

	}
	#left {
	  width: 20%;
	  height: 100%;
	  display: inline-block;
	 }
	#right {
	  height: 100%;
	  width: 20%;
      display: inline-block;
	  position: relative;
	  left: 676px;
	  
	}
	#name {
      font-family: big john;
      font-size: 50px;
	  width: 100%;
      margin: 0 auto;
      border-bottom: 1px solid;	  
	  color: white;
	}
	.wot {
	  background-color: #E6C88C;
	}
</style>
<head><title>Film Club</title></head>
<body>
    <div id="content">
        <div id="header">
		<h1 id="name">The Film Club</h1>
		</div>
		<div id="left", class="wot">
        <p>Test</p>
		</div>
		<div id="right", class="wot">
		</div>
	</div>
</body>
</html>

＆＃13;

Answer 1

首先，您的HTML中有逗号，这是不正确的。

<div id="content">
    <div id="header">
        <h1 id="name">The Film Club</h1>
    </div>
    <div id="left" class="wot">
        <p>Test</p>
    </div>
    <div id="right" class="wot">
    </div>
</div>

其次，带有文字输入的div的高度设置为100%，而你#content div的高度设置为1500px，因此div会扩展到此完整高度。 div的高度仅在包含内容时应用，这就是当您放入文本时它更改的原因。您可以从CSS中删除高度，或将其设置为更合适的值。

Answer 2

您的<div>中有两个用逗号分隔属性。 html标记中的属性不需要用逗号分隔。它们应该被一个空格隔开（这可能甚至不需要，但你应该为了好的风格而这样做。）

我将假设不正确的缩进是发布代码的结果，但如果情况并非如此，那么正确的缩进始终是改进代码的好方法。

Answer 3

我更改了以下CSS代码css

#left {
      width: 20%;
      height: 100%;
      float:left;
      display: inline-block;
     }
#right {
      height: 100%;
      width: 20%;
      display: inline-block;
      position: relative;
      float: right;   
}

＆＃13;

<!DOCTYPE HTML>
<html>
<style>
    * {
	  font-family: georgia;
	}
	body {
	   background-color: white;
	}
	#content {
	  width: 60%;
	  height: 1500px;
	  margin: auto;
	  
	  
	}
	#header {
	  height: 200px;
	  border: 1px dashed;
	  background-color: #44424D;

	}
	#left {
	  width: 20%;
	  height: 100%;
      float:left;
	  display: inline-block;
	 }
	#right {
	  height: 100%;
	  width: 20%;
      display: inline-block;
	  position: relative;
	  float: right;
	  
	}
	#name {
      font-family: big john;
      font-size: 50px;
	  width: 100%;
      margin: 0 auto;
      border-bottom: 1px solid;	  
	  color: white;
	}
	.wot {
	  background-color: #E6C88C;
	}
</style>
<head><title>Film Club</title></head>
<body>
    <div id="content">
        <div id="header">
		<h1 id="name">The Film Club</h1>
		</div>
		<div id="left", class="wot">
        <p>Test</p>
		</div>
		<div id="right", class="wot">
		</div>
	</div>
</body>
</html>

＆＃13;

Div搞砸了我尝试添加文字吗？

3 个答案: