为了账号安全,请及时绑定邮箱和手机立即绑定

如何用 CSS 中的 div 标签填充空间?(包括图片)

如何用 CSS 中的 div 标签填充空间?(包括图片)

aluckdog 2023-10-24 20:01:00
我是一名新手,在自己学习 HTML 和 CSS 方面,并且一直在几个视频的指导下尝试编码。显然,我必须通过这种方式来解决知识差距。不管怎样,我已经从我的头脑中“设计”了一个CSS布局,这样可以帮助我在学习的过程中进一步推进。这是图像,我希望它具有图像布局代码的输出如下所示:结果我一直在试图弄清楚如何在左侧和右侧的标题 div 下方对齐一个 div,以完全填充黑色空间。我的代码如下:body {  font-family: Verdana, Arial, Helvetica, sans-serif;  color: blue;  margin: 0;  padding: 0;  width: 100%;  background-color: black;  background-size: cover;  background-repeat: no-repeat;}.Header {  height: 191px;  background: #808080;  border: 1px solid #000000;  text-align: center;  font-family: Arial, Helvetica, sans-serif;  font-size: 30px;}.contentwrap {  width: 1025px;  margin: 0 auto;}.container {  background: #808080;  border: 1px solid #000000;  height: 190px;}.footer {  background: #808080;  border: 1px solid #000000;  height: 129px;}<div class="Header">  <h1> Header </h1></div><div class="contentwrap">  <div class="container">    <p> Text </p>  </div>  <div class="container">    <p> Text </p>  </div>  <div class="container">    <p> text </p>  </div>  <div class="container">    <p> text </p>  </div>  <div class="footer">    <p> footer </p>  </div></div>
查看完整描述

2 回答

?
四季花海

TA贡献1811条经验 获得超5个赞

body {

  font-family: Verdana, Arial, Helvetica, sans-serif;

  color: blue;

  margin: 0;

  padding: 0;

  background-color: black;

}


.Header {

  height: 191px;

  background: #808080;

  border: 1px solid #000000;

  text-align: center;

  font-family: Arial, Helvetica, sans-serif;

  font-size: 30px;

}


.content {

  display: flex;

}


.content__sidebar {

  width: 200px;

  min-height: 100%;

}


.content__sidebar--left {

  background-color: red;

}


.content__sidebar--right {

  background-color: green;

}



.content__main {

  flex: 1;

}


.container {

  background: #808080;

  border: 1px solid #000000;

  height: 190px;

}


.footer {

  background: #808080;

  border: 1px solid #000000;

  height: 129px;

}

<div class="Header">

  <h1> Header </h1>

</div>


<div class="content">

  <div class="content__sidebar content__sidebar--left"></div>

 

  <div class="content__main">

    <div class="container">"

      <p> Text </p>

    </div>

    <div class="container">

      <p> Text </p>

    </div>

    <div class="container">

      <p> text </p>

    </div>

    <div class="container">

      <p> text </p>

    </div>

  </div>

  

  <div class="content__sidebar content__sidebar--right"></div>

</div>


<div class="footer">

  <p> footer </p>

</div>


查看完整回答
反对 回复 2023-10-24
?
翻翻过去那场雪

TA贡献2065条经验 获得超13个赞

丑陋的方式: https: //codepen.io/stefantigro/pen/bGdZyeX

<div class="Header">

  <h1> Header </h1>

</div>

<div class="">

  <div class="right-side side">


  </div>

  <div class="middle">

    <div class="container">

    <p> Text </p>

  </div>

  <div class="container">

    <p> Text </p>

  </div>

  <div class="container">

    <p> text </p>

  </div>

  <div class="container">

    <p> text </p>

  </div>

  <div class="footer">

    <p> footer </p>

  </div>

  </div>

  <div class="left-side side">


  </div>

</div>

body {

  font-family: Verdana, Arial, Helvetica, sans-serif;

  color: blue;

  margin: 0;

  padding: 0;

  width: 100%;

  background-color: black;

  background-size: cover;

  background-repeat: no-repeat;

}


.Header {

  height: 191px;

  background: #808080;

  border: 1px solid #000000;

  text-align: center;

  font-family: Arial, Helvetica, sans-serif;

  font-size: 30px;

}


.contentwrap {

  margin: 0 auto;

}


.container {

  background: #808080;

  border: 1px solid #000000;

  height: 190px;

  display: block;

}


.footer {

  background: #808080;

  border: 1px solid #000000;

  height: 129px;

}


.middle

{

  display: inline-block;

  width: 60%;

  height: 100%;

}


.right-side{

  background: blue;

}


.left-side{


  background: red;

}


.side{

  margin: 0;

  width: 19%;

  height: 800px;

  display: inline-block;

}

这里的问题是我们使用设定的尺寸,并且井的尺寸各不相同,尤其是从显示器到显示器。


查看完整回答
反对 回复 2023-10-24
  • 2 回答
  • 0 关注
  • 109 浏览

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信