Question

/* Responsive Styling */

* {
    box-sizing: border-box;
}
}
.row::after {
    content: "";
    clear: both;
    display: table;
}
[class*="col-"] {
    float: left;
    padding: 15px;
}
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

/* Body CSS */
/* Header */

#header {
	height: 70px;
	background-color:white;
	border-top: solid 5px #324f8e;
	border-bottom: solid 2px #d5dae7;
	}
	
.logo {
	background-image: url('images/logo.png');
	background-repeat: no-repeat;
	margin: 15px;
	float: left;
	width: 100%;
	height: auto;
	}
	
.search {
	backr

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>Project</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>

<div id="header">
<div class="col-5 logo"></div>
<input type="search" class="col-2 search" placeholder="Search..." /></div>
<div class="ool-2 account"></div>
<div class="ool-1 notification"></div>
<div class="ool-2 logout"></div>
</div>



</body>

</html>

我似乎无法在徽标后面的标题容器中进行搜索。我希望这一切都符合标题栏。我正在尝试使用网格系统，我认为这是一个小的东西，但作为一个新手，它不是点击给我。

同样有标识问题，它似乎在底部略微切断，尝试了一些高度不同的东西，也没有运气。

提前致谢。

Answer 1

将此代码添加到标题中：

display: grid;
grid-template-columns: repeat(x, 1fr);

在一行中更改x所需的元素数。

这篇文章可能会有所帮助： CSS Grid Guide

CSS Grid System无法正常工作

1 个答案: