Question

问题在于：css部分中的Whole2元素应该是其他div的容器，但它不会在其他元素周围创建边框或填充。如果有人能告诉我我做错了什么，请做。

顺便说一句，内容是无稽之谈，忽略它。

这是我的css：

    <style>
.Whole2{
    border:4px solid black;
    padding: 1em;
}
.Title{
    border: 1px solid;
    background: lightblue;
    text-align: right;
    width: 57.9em;
    height: 8em;
    padding: .5em;
}
.Subtitle {
   font-size: 0.8em;
}
.Blog1 {
    width: 44em;
    height: 20em;
    border:1px solid black;
    background: lightgreen;
    text-align: justify;
    padding: .5em;

}

.Blog2 {
    width: 44em;
    height: 20em;
    border:1px solid black;
    background: lightgreen;
    text-align: justify;
    padding: .5em;
}
.Friends {
    border:1px solid black;
    background: purple;
    width: 12em;
    height: 12em;
    position: absolute;
    top:10em;
    left:0.5em;
    padding: .5em;
}
.clears{
    clear: both;
}
.theImg{
    float: right;
    padding: .5em;
}
.Blogs{
    position: absolute;
    top:10em;
    left:14.4em;
}
.blogtext{
    font-size: 18px;
}
.Whole2 {
    border:4px solid black;
    padding: 1em;
}

</style>

这是我的HTML：

<!DOCTYPE html>
<html>
   <link rel="stylesheet" type="text/css" href="lab1.css">
   <div class="Whole2">
      <head>
         <div Class="Title">
            <h1> Title thing </h1>
         <div class="Subtitle">
            <h2> Subtitle thing </h2>
         </div>
         </div>
      </head>

   <h3 class="clears"></h3>

   <div class="Friends">
      <head>
         <h1> Friends</h1>
      </head>
      <body>
         <table>
            <th>
               Friends
            </th>
            <tr>
               <td>
                  Leo Bloom
               </td>
            </tr>
            <tr>
               <td>
                  Leo Bloom
               </td>
            </tr>
            <tr>
               <td>
                  Leo Bloom
               </td>
            </tr>
         </table>
   </body>
   </div>



   <h3 class="clears"></h3>

   <div class="Blogs">

   <div class="Blog1">
   <head>
      <h1> <span><time>2015-02-11</time></span>: Moose Day</h1>
   </head>
   <body>
      <div class="theImg">
   <img src="http://ia.media-imdb.com/images/M/MV5BMjE0ODk2NjczOV5BMl5BanBnXkFtZTYwNDQ0NDg4._V1_SY317_CR4,0,214,317_AL_.jpg" height="200" width="200">
      </div>
      <h2>
      <div class="blogtext">
      The moose (North America) or elk (Europe), Alces alces, is the largest extant species in the deer family. Moose are distinguished by the palmate antlers of the males; other members of the family have antlers with a dendritic ("twig-like") configuration. Moose typically inhabit boreal and mixed deciduous forests of the Northern Hemisphere in temperate to subarctic climates. Moose used to have a much wider range but hunting and other human activities greatly reduced it over the years. Moose have been reintroduced to some of their former habitats. Currently, most moose are found in Canada, Alaska, Scandinavia and Russia. 
      </div>
      </h2>
   </body>
   </div>

   <h3 class="clears"></h3>

   <div class="Blog2">
   <head>
      <h1> <span><time>2015-03-11</time></span>: Second Moose Day</h1>
   </head>
   <body>
      <div class="theImg">
      <img src="http://ia.media-imdb.com/images/M/MV5BMjE0ODk2NjczOV5BMl5BanBnXkFtZTYwNDQ0NDg4._V1_SY317_CR4,0,214,317_AL_.jpg" height="200" width="200">
      </div>
      <h2>
      <div class="blogtext">
      Their diet consists of both terrestrial and aquatic vegetation. The most common moose predators are wolves, bears, and humans. Unlike most other deer species, moose are solitary animals and do not form herds. Although generally slow-moving and sedentary, moose can become aggressive and move surprisingly quickly if angered or startled. Their mating season in the autumn can lead to spectacular fights between males competing for a female.
      </div>
      </h2>

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


</html>

Answer 1

首先，将<div class="Whole2">放入体内。其次，您只能拥有一个<head>和一个<body>。而且我认为你将<head>与<header>混为一谈。

Container Div无法运作

1 个答案: