CSS网格中的问题定位框项
CSS网格中的问题定位框项
提问于 2019-01-24 16:32:39
我正在学习HTML & CSS，现在我正在学习CSS网格。
我想我正在理解CSS网格是如何工作的，我一直在尝试编写一个网站，其中的一个方框项目位于网格中的特定位置。
我拍了一张截图，画了一个方格，在那里我试图定位集装箱箱项目。我一直在尝试用网格列和网格行来定位它，现在有效了。
(那个黑色的实心长方形应该是在看集装箱盒的油漆图纸)
这是我的密码：
body {
background: #aaa;
}
html,
body,
.header-bar {
height: 100%;
margin: 0;
}
.header-grid {
display: grid;
grid-template: 100px / 1fr 1fr 1fr;
}
.header-bar {
grid-column: 1/4;
background: #ccc;
margin-bottom:
}
.menu-items ul {
margin: 0;
padding: 0;
}
.menu-items li {
list-style: none;
float: left;
margin-right: 10px;
background-color: #aaa;
position: relative;
line-height: 60px;
}
.menu-items {
grid-row: 1/2;
grid-column: 1/2;
float: left;
margin-left: 20px;
margin-top: 18px;
}
.img {
height: 70px;
width: 90px;
float: left;
margin-left: 100px;
margin-top: 10px;
}
.container-box {
background: #000;
width: 18em;
grid-column: 3/4;
grid-row: ;
}
/*float clearfix */
.list-items:after {
content: "";
display: table;
clear: both;
}
.header-bar:after {
content: "";
display: table;
clear: both;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="header-grid">
<header class="header-bar">
<img src="img/shop.png" class="img">
<nav class="menu-items">
<ul class="list-items">
<li>Categories</li>
<li>Gifts</li>
<li>Giveaways</li>
<li>Exclusive</li>
</ul>
</nav>
</header>
</div>
<div class="container-box">
test
</div>
</body>
</html>
另外，如果你选了一个语义错误，请告诉我。
回答 2
Stack Overflow用户
回答已采纳
发布于 2019-01-24 17:20:39
感谢你自己努力学习这些东西！所以有几件事：-你留下了一些css样式的空白。不要这么做，因为在某些浏览器中，这种行为是不可预测的。例如，“..header bar”中的margin-bottom
- 在处理柔性箱或网格时，唯一会受到影响的元素将是它的直接子元素。因此，在“..header grid”的情况下，唯一的子元素是..header bar，因此使其成为一个网格是多余的。
- 回到最后一点可能会说明为什么事情对你不起作用。容器盒，这是你想要放在那个位置，没有一个父元素，即网格，所以网格不会影响它。如何解决这个问题取决于你未来的计划是什么。您可以简单地在左边和顶部添加一些空白。分别为200 and和100 and。你也可以做一些类似于这个科德芬的事情。这些都是获取你想要的东西的肮脏方式。一种更恰当的方法将需要对这一切进行重新组合。利用容器，避开浮标。相反，请使用柔性箱。这样做实际上并不需要太多的网格。以下是许多可能的方法之一，可以清除科德芬。展望未来，你会想远离浮标在一般情况下。Flexbox和grid允许您以更干净和更稳定的方式做类似的事情，同时也提供更多的灵活性。祝你好运，如果任何事情让你感到困惑，可以随时跟进。
Stack Overflow用户
发布于 2019-01-24 16:44:29
现在，您的头正在使用网格，但您的布局的其余部分不是。
类似于在头部周围的元素上设置display: grid;，您需要在container-box div周围创建带有display: grid;的容器元素。
这样，网格项(container-box)就可以使用所设置的网格列和网格行属性。只需确保为网格行设置一个值，现在它是空的。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54351339
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号