Question

当我运行以下HTML代码时，我的正文代码无法正常呈现，而我只剩下标题和侧边栏。

正文不显示，正文框也没有显示。有人可以告诉我我做错了什么吗？谢谢。

这是我的HTML代码：

<!doctype html>
<html>
<head>
    <title>Coding Website Homepage</title>
    <meta author="Lyna Beraich" content="Coding Website Homepage">
    <link rel="stylesheet" href="homepageCss.css" type="text/css">
</head>
<body id="webbody">
    <div id="header" class= "container"><h1 id="title">Coding Interests</h1></div>
    <div id="sidebar" class= "container"></div>
    <div id="body" class="container">
    <h2 class="bodytext">
        Recent News
    </h2>
    <p class="bodytext">
      I have recently started to learn jquery, a neat way to make your website look
      nice and interactive.



    </p>
    </div>
</body>

这是我的css代码：

#header {
  width: 700px;
  height: 100px;
  border-radius: 2px;
  background-color:  #05b6f3;
  border-style: groove;
  margin: auto;
  text-align: center;
  }
#sidebar {
  width: 200px;
  height: 600px;
  border-radius: 2px;
  background: #05b6f3;
  border-style: groove;
  margin-left: 20px;
}
#title {
  font-size: 40px;
  font-family: sans-serif;
  color: #4e8dbd;
  text-align: center;
}
#webbody {
  background-color: #609299;
}
#body {
  width: 800px;
  margin: auto;
  height: 900px;
  border-radius: 2px;
  background-color: ;#4e8dbd;
  border-style: groove;
}
.bodytext {
  font-size: 14px;
  font-family: Verdana;
  margin-right: 10px;
  margin-left: 20px;
  margin-top: 20px;
  margin-top: 20px;
}

Answer 1

修复它的一种方法是将侧边栏和主体div向左浮动，然后将body div的宽度设置为width: calc(100% - 240px);，使其100％减去侧边栏宽度和填充。

请参阅小提琴：https://jsfiddle.net/c259LrpL/19/

#sidebar {
  width: 200px;
  float: left;
  height: 600px;
  border-radius: 2px;
  background: #05b6f3;
  border-style: groove;
  margin-left: 20px;
}

#body {
  width: calc(100% - 240px);
  float: left;
  height: 900px;
  border-radius: 2px;
  background-color: ;
  #4e8dbd;
  border-style: groove;
}

HTML代码缺少正文

1 个答案: