Question

我想制作一个容器来填充内容（主要是文本），但我不知道从哪里开始。我想让它看起来像[this]

宽度，高度，背景颜色等并不重要。

img {
   width: 300px;
   height: 90px;
    
}
    
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid #e7e7e7;
  background-color: #fff;
}
    
    
li {
    float: left;
    border-right:1px solid #bbb;
    border-color: #87CEFA;
    width: 200px;  
}
    
li:last-child {
    border-right: none;
}

li a {
    display: block;
    color: #666;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}
    
li a:hover:not(.active) {
    background-color: #ddd;
}
    
li a.active {
    color: white;
    background-color: #4CAF51;
}
    
.container {
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
}

<div class="container">
    <img src="https://img.clipartfest.com/c61469b195ccf8a2f1090f2673258543_-of-the-nintendo-logo-nintendo-logo-clipart_1024-239.gif" />
    
    <ul>
       <li><a href="A.html">A</a></li>
       <li><a href="B.html">B</a></li>
       <li><a href="c.html">C</a></li>
       <li><a href="D.html">D</a></li>
       <li><a href="E.html">E</a></li> 
    </ul>
</div>

Answer 1

您可以执行此类操作，您可以根据需要更改.gray-container值

.gray-container {
  background:lightgray;
  width: 60%;
  margin: 0 auto;
  min-height: 600px;
  margin-top:20px;
}

img {
  width: 300px;
  height: 90px;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid #e7e7e7;
  background-color: #fff;
}

li {
  float: left;
  border-right: 1px solid #bbb;
  border-color: #87CEFA;
  width: 200px;
}

li:last-child {
  border-right: none;
}

li a {
  display: block;
  color: #666;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover:not(.active) {
  background-color: #ddd;
}

li a.active {
  color: white;
  background-color: #4CAF51;
}

.container {
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
}

<div class="container">
  <img src="https://img.clipartfest.com/c61469b195ccf8a2f1090f2673258543_-of-the-nintendo-logo-nintendo-logo-clipart_1024-239.gif" />

  <ul>
    <li><a href="A.html">A</a></li>
    <li><a href="B.html">B</a></li>
    <li><a href="c.html">C</a></li>
    <li><a href="D.html">D</a></li>
    <li><a href="E.html">E</a></li>
  </ul>
  <div class="gray-container">
    <h1>123</h1>
  </div>
</div>

Answer 2

参考：MDN < length > VH

大多数浏览器都支持使用wiewport，兼容性很好。在您的情况下，您可以在主div中添加一个灰色容器。

<强> CSS

.graydiv {
margin: 0 auto;
width: 75%;
height: 100%;
min-height: 100vh; // that's the trick
background-color: #ccc;
border: 1px solid #000;
}

<强> HTML

<div class="container">
<img src="https://img.clipartfest.com/c61469b195ccf8a2f1090f2673258543_-of-the-nintendo-logo-nintendo-logo-clipart_1024-239.gif" />

<ul>
   <li><a href="A.html">A</a></li>
   <li><a href="B.html">B</a></li>
   <li><a href="c.html">C</a></li>
   <li><a href="D.html">D</a></li>
   <li><a href="E.html">E</a></li> 
</ul>

<div class="graydiv">
123
</div>

</div>

然后，您可以根据自己的需要调整边距和填充。

注意：为了确保，如果与其他css样式没有冲突，我建议您使用：

html {
height: 100%;
}

body {
min-height: 100%;
margin: 0;
padding: 0;
}

制作一个容器来填充内容？

2 个答案: