当前位置： 文江博客 话题详情

为什么我的DIV在展示网格上展开以覆盖所有可用区域？

发布于 2025-02-01 03:49:45 字数 3083 浏览 2 评论 0 原文

我试图将2个按钮插入2个divs。 我的CS中的所有DIVS都具有分配的显示网格。

我的问题是，即使我不告诉他们的宽度为100％或宽度为100VW，为什么要使用类纽扣和按钮右侧的DIVS扩展以占用所有可用空间？

对于所有其他Div，我确实指定为100VW，但不是最后一个，那么为什么它们会继续扩展。

如果我放置显示：内部块，它有效，但是我不明白为什么我必须首先指定这一点？

这是我的代码：

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
div {
  display: grid;
  border: dotted 1px #ff0;
}
body {
  background-color: #000;
  color: #fff;
  font-family: Montserrat, sans-serif;
  background-image: url(/../../media/index0.jpg);
  background-repeat: no-repeat;
  background-color: #000;
  background-size: cover;
}
.div-container {
  border: solid 2px red;
  height: 100vh;
  width: 100vw;
}
.div-top-row {
  border: solid 2px pink;
  height: 65vh;
  width: 100vw;
}
.div-bottom-row {
  border: dotted 3px green;
  height: 30vh;
  width: 100vw;
  grid-auto-flow: column;
}
.copyrights {
  height: 5vh;
  width: 100vw;
  justify-items: center;
  align-items: center;
  font-size: 11px;
}
.btn {
  transition: all 0.3s ease-in;
  box-shadow: unset;
}
.btn-gradient {
  border: none;
  border-radius: 0.25rem;
  color: #fff;
  display: inline-block;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1em;
  padding: 0.875rem 1rem;
  text-decoration: none;
  transition: all 0.15s;
  background: linear-gradient(45deg, #1e92e6, #60fbd0 75%, #1c6599 150%);
  background-size: 300% 100%;
}
.btn-blank-blue {
  background: 0 0;
  border: 1px solid #1e92e6;
  color: #1e92e6;
}
.btn:hover {
  border-color: transparent;
  background: linear-gradient(45deg, #1e92e6, #60fbd0 75%, #1c6599 150%);
  background-size: 300% 100%;
  background-position: 50% 0;
  color: #22242f;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <link rel="stylesheet" href="/../../css/index.css" />
    <link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet" />
    <link rel="icon" type="image/x-icon" href="/../../media/global0.ico" />
    <title>Home</title>
  </head>
  <body>
    <div class="div-container">
      <div class="div-top-row"></div>
      <div class="div-bottom-row">
        <div class="div-button-left">
          <button class="btn btn-gradient btn-blank-blue" onclick='window.open("https://www.gitbook.com/")'>Read Docs</button>
        </div>
        <div class="div-button-right">
          <button class="btn btn-gradient" onclick='location.href="dashboard.html"'>Enter App</button>
        </div>
      </div>
      <div class="copyrights">
        <p>© 2022 New Company Sample LLC - All rights reserved.</p>
      </div>
    </div>
  </body>
</html>

原文

I'm trying to insert 2 buttons inside 2 divs.
All divs in my CSS have a display grid as assigned.

My question is why do the divs with class button-left and button-right expand to take all the space available, even if I did not tell them to have a width of 100% or width of 100vw?

To all other div I did specify to be 100vw but not this last one, so why do they keep expanding.

If I put display: block inside of them it works, but I don't understand why do I have to specify that in the first place?

Here is my code:

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
div {
  display: grid;
  border: dotted 1px #ff0;
}
body {
  background-color: #000;
  color: #fff;
  font-family: Montserrat, sans-serif;
  background-image: url(/../../media/index0.jpg);
  background-repeat: no-repeat;
  background-color: #000;
  background-size: cover;
}
.div-container {
  border: solid 2px red;
  height: 100vh;
  width: 100vw;
}
.div-top-row {
  border: solid 2px pink;
  height: 65vh;
  width: 100vw;
}
.div-bottom-row {
  border: dotted 3px green;
  height: 30vh;
  width: 100vw;
  grid-auto-flow: column;
}
.copyrights {
  height: 5vh;
  width: 100vw;
  justify-items: center;
  align-items: center;
  font-size: 11px;
}
.btn {
  transition: all 0.3s ease-in;
  box-shadow: unset;
}
.btn-gradient {
  border: none;
  border-radius: 0.25rem;
  color: #fff;
  display: inline-block;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1em;
  padding: 0.875rem 1rem;
  text-decoration: none;
  transition: all 0.15s;
  background: linear-gradient(45deg, #1e92e6, #60fbd0 75%, #1c6599 150%);
  background-size: 300% 100%;
}
.btn-blank-blue {
  background: 0 0;
  border: 1px solid #1e92e6;
  color: #1e92e6;
}
.btn:hover {
  border-color: transparent;
  background: linear-gradient(45deg, #1e92e6, #60fbd0 75%, #1c6599 150%);
  background-size: 300% 100%;
  background-position: 50% 0;
  color: #22242f;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <link rel="stylesheet" href="/../../css/index.css" />
    <link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet" />
    <link rel="icon" type="image/x-icon" href="/../../media/global0.ico" />
    <title>Home</title>
  </head>
  <body>
    <div class="div-container">
      <div class="div-top-row"></div>
      <div class="div-bottom-row">
        <div class="div-button-left">
          <button class="btn btn-gradient btn-blank-blue" onclick='window.open("https://www.gitbook.com/")'>Read Docs</button>
        </div>
        <div class="div-button-right">
          <button class="btn btn-gradient" onclick='location.href="dashboard.html"'>Enter App</button>
        </div>
      </div>
      <div class="copyrights">
        <p>© 2022 New Company Sample LLC - All rights reserved.</p>
      </div>
    </div>
  </body>
</html>

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（1）

软的没边 2025-02-08 03:49:45

特殊性似乎存在问题。

特异性是一种适用于给定CSS声明的权重，由匹配选择器中的每个选择器类型的数量确定。

。

您本质上回答了自己的问题。 display：block; 有效，因为这是默认的 display div 's。您有 div {display：grid;} 更改默认的 display：block; on on on div的 。

显示：网格; 将尝试使用所有可用的空间。因此，为什么您的按钮被拉伸。我要么将网格仅在适用的 div 's上。或者，您可以使用 ：不 伪级类似：

div:not(.div-button-right, .div-button-left) {
  display: grid;
  border: dotted 1px #ff0;
}

这将排除 div 在中定义的：不是这些样式的伪类。

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
div {
  border: dotted 1px #ff0;
}
body {
  background-color: #000;
  color: #fff;
  font-family: Montserrat, sans-serif;
  background-image: url(/../../media/index0.jpg);
  background-repeat: no-repeat;
  background-color: #000;
  background-size: cover;
}
.div-container {
  display: grid;
  border: solid 2px red;
  height: 100vh;
  width: 100vw;
}
.div-top-row {
  border: solid 2px pink;
  height: 65vh;
  width: 100vw;
}
.div-bottom-row {
  display: grid;
  border: dotted 3px green;
  height: 30vh;
  width: 100vw;
  grid-auto-flow: column;
}
.copyrights {
  display: grid;
  height: 5vh;
  width: 100vw;
  justify-items: center;
  align-items: center;
  font-size: 11px;
}
.btn {
  transition: all 0.3s ease-in;
  box-shadow: unset;
}
.btn-gradient {
  border: none;
  border-radius: 0.25rem;
  color: #fff;
  display: inline-block;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1em;
  padding: 0.875rem 1rem;
  text-decoration: none;
  transition: all 0.15s;
  background: linear-gradient(45deg, #1e92e6, #60fbd0 75%, #1c6599 150%);
  background-size: 300% 100%;
}
.btn-blank-blue {
  background: 0 0;
  border: 1px solid #1e92e6;
  color: #1e92e6;
}
.btn:hover {
  border-color: transparent;
  background: linear-gradient(45deg, #1e92e6, #60fbd0 75%, #1c6599 150%);
  background-size: 300% 100%;
  background-position: 50% 0;
  color: #22242f;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <link rel="stylesheet" href="/../../css/index.css" />
    <link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet" />
    <link rel="icon" type="image/x-icon" href="/../../media/global0.ico" />
    <title>Home</title>
  </head>
  <body>
    <div class="div-container">
      <div class="div-top-row"></div>
      <div class="div-bottom-row">
        <div class="div-button-left">
          <button class="btn btn-gradient btn-blank-blue" onclick='window.open("https://www.gitbook.com/")'>Read Docs</button>
        </div>
        <div class="div-button-right">
          <button class="btn btn-gradient" onclick='location.href="dashboard.html"'>Enter App</button>
        </div>
      </div>
      <div class="copyrights">
        <p>© 2022 New Company Sample LLC - All rights reserved.</p>
      </div>
    </div>
  </body>
</html>

There seems to be an issue with Specificity.

Specificity is a weight that is applied to a given CSS declaration, determined by the number of each selector type in the matching selector.

You essentially answered your own question. display: block; works because that is the default display for div's. You have div { display: grid;} which changes the default display: block; on all of your div's.

display: grid; will try to use all available space. Hence, why your buttons are stretched. I would either put the grid on only applicable div's. Or, you could use the :not pseudo-class like so:

div:not(.div-button-right, .div-button-left) {
  display: grid;
  border: dotted 1px #ff0;
}

This will exclude the div's defined in the :not pseudo-class of those styles.

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
div {
  border: dotted 1px #ff0;
}
body {
  background-color: #000;
  color: #fff;
  font-family: Montserrat, sans-serif;
  background-image: url(/../../media/index0.jpg);
  background-repeat: no-repeat;
  background-color: #000;
  background-size: cover;
}
.div-container {
  display: grid;
  border: solid 2px red;
  height: 100vh;
  width: 100vw;
}
.div-top-row {
  border: solid 2px pink;
  height: 65vh;
  width: 100vw;
}
.div-bottom-row {
  display: grid;
  border: dotted 3px green;
  height: 30vh;
  width: 100vw;
  grid-auto-flow: column;
}
.copyrights {
  display: grid;
  height: 5vh;
  width: 100vw;
  justify-items: center;
  align-items: center;
  font-size: 11px;
}
.btn {
  transition: all 0.3s ease-in;
  box-shadow: unset;
}
.btn-gradient {
  border: none;
  border-radius: 0.25rem;
  color: #fff;
  display: inline-block;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1em;
  padding: 0.875rem 1rem;
  text-decoration: none;
  transition: all 0.15s;
  background: linear-gradient(45deg, #1e92e6, #60fbd0 75%, #1c6599 150%);
  background-size: 300% 100%;
}
.btn-blank-blue {
  background: 0 0;
  border: 1px solid #1e92e6;
  color: #1e92e6;
}
.btn:hover {
  border-color: transparent;
  background: linear-gradient(45deg, #1e92e6, #60fbd0 75%, #1c6599 150%);
  background-size: 300% 100%;
  background-position: 50% 0;
  color: #22242f;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <link rel="stylesheet" href="/../../css/index.css" />
    <link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet" />
    <link rel="icon" type="image/x-icon" href="/../../media/global0.ico" />
    <title>Home</title>
  </head>
  <body>
    <div class="div-container">
      <div class="div-top-row"></div>
      <div class="div-bottom-row">
        <div class="div-button-left">
          <button class="btn btn-gradient btn-blank-blue" onclick='window.open("https://www.gitbook.com/")'>Read Docs</button>
        </div>
        <div class="div-button-right">
          <button class="btn btn-gradient" onclick='location.href="dashboard.html"'>Enter App</button>
        </div>
      </div>
      <div class="copyrights">
        <p>© 2022 New Company Sample LLC - All rights reserved.</p>
      </div>
    </div>
  </body>
</html>

回复 原文
~没有更多了~

关于作者

放手`

暂无简介

文章
评论
27 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

十二

文章 0 评论 0

飞烟轻若梦

文章 0 评论 0

OPleyuhuo

文章 0 评论 0

wxb0109

文章 0 评论 0

旧城空念

文章 0 评论 0

-小熊_

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文