使网格上方的元素与网格宽度相同

我希望网格上方的搜索输入与网格大小相同。当您最初在分辨率足够大的设备上加载它时,它们看起来是一样的,但是当您开始缩小浏览器视口,以便每行只适合一张卡片时,网格会变小,但是,上面的 div包含搜索输入不包含。我想让搜索 div 具有反应性,以便它可以为分辨率较小的用户调整大小。

也许有某种方法可以实际放入网格中,我只是不知道该怎么做。

我创建了以下 codepen 作为示例:

https://codepen.io/latchkostov/pen/vYOVjjo

* {

  box-sizing: border-box;

  margin: 0;

  padding: 0;

}


body {

  background: #1f1f1f;

}


.content {

  display: flex;

  flex-direction: column;

  height: 100%;

  justify-content: center;

  max-width: 920px;

  margin: 20px 20px;

}


.grid {

  display: grid;

  height: 100%;

  justify-content: center;

  grid-template-columns: repeat(auto-fill, minmax(450px, 450px));

  grid-gap: 20px;

  grid-template-rows: auto;

}


.search {

  width: 100%;

  margin-bottom: 40px;

  grid-area: auto / auto;

}


.search-input {

  width: 100%;

}


.item {

  width: 100%;

  height: 300px;

  background: #bfbfbf;

}

<div class="content">

  <div class="search">

    <input type="text" placeholder="search" class="search-input" />

  </div>

  <div class="grid">

    <div class="item">Card 1</div>

    <div class="item">Card 2</div>

    <div class="item">Card 3</div>

    <div class="item">Card 4</div>

  </div>

</div>


有只小跳蛙
浏览 104回答 3
3回答

海绵宝宝撒

您的代码几乎是正确的,但缺少一些东西。您box-sizing: border-box;与.content类属性一起使用margin: 20px 20px;会在较小的设备中产生问题。.content应该是margin: 0 auto;和padding: 20px 15px;。你用grid-template-columns: repeat(auto-fill, minmax(450px, 450px));. 它不适用于较小的设备,因为设备尺寸小于450px您将看到的水平滚动条。您可以使用@media重写grid属性。下面我将修改您的css属性和HTML片段。* {&nbsp; box-sizing: border-box;&nbsp; margin: 0;&nbsp; padding: 0;}body {&nbsp; background: #1f1f1f;&nbsp; margin: 0;&nbsp; padding: 0;}.content {&nbsp; display: flex;&nbsp; flex-direction: column;&nbsp; /* height: 100%; */ /* You no need to use height 100% here. It have no effect */&nbsp; min-height: 100vh;&nbsp; justify-content: center;&nbsp; max-width: 920px;&nbsp; margin: 0 auto;&nbsp; padding: 20px 15px;&nbsp; width: 100%;}.grid {&nbsp; display: grid;&nbsp; /* height: 100%; */&nbsp; grid-template-columns: repeat(2, 1fr);&nbsp; grid-gap: 20px;}@media (max-width: 767px){&nbsp; .grid{&nbsp; &nbsp; grid-template-columns: 100%;&nbsp; }}.search {&nbsp; display: flex;&nbsp; flex-direction: column;&nbsp; width: 100%;&nbsp; margin-bottom: 40px;&nbsp; /* grid-area: auto / auto; */}.search-input {&nbsp; height: 40px;&nbsp; background-color: white;&nbsp; border: 1px solid rgba(0, 0, 0, 0.15);&nbsp; border-radius: 4px;&nbsp; padding: 6px 12px;&nbsp; width: 100%;}@media (max-width: 767px){&nbsp; .search-input{&nbsp; &nbsp; max-width: 450px;&nbsp; &nbsp; margin-left: auto;&nbsp; &nbsp; margin-right: auto;&nbsp; }}.item {&nbsp; width: 100%;&nbsp; height: 300px;&nbsp; background: #bfbfbf;&nbsp; max-width: 450px;&nbsp; margin-left: auto;&nbsp; margin-right: auto;}<div class="content">&nbsp; <div class="search">&nbsp; &nbsp; <input type="text" placeholder="search" class="search-input" />&nbsp; </div>&nbsp; <div class="grid">&nbsp; &nbsp; <div class="grid-item"><div class="item">Card 1</div></div>&nbsp; &nbsp; <div class="grid-item"><div class="item">Card 2</div></div>&nbsp; &nbsp; <div class="grid-item"><div class="item">Card 3</div></div>&nbsp; &nbsp; <div class="grid-item"><div class="item">Card 4</div></div>&nbsp; </div></div>

眼眸繁星

我认为您可以通过对代码进行一些修改来使布局正常工作:在弹性容器中从 切换到column。row wrap将搜索栏和网格设置为容器的 100% 宽度。修改后的代码笔.content {&nbsp; display: flex;&nbsp; flex-wrap: wrap;&nbsp; align-content: flex-start;&nbsp; height: 100vh;&nbsp; padding: 20px;}.search {&nbsp; flex: 0 0 100%;&nbsp; min-width: 450px;&nbsp; margin-bottom: 40px;}.search-input {&nbsp; width: 100%;}.grid {&nbsp; flex: 1;&nbsp; display: grid;&nbsp; grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));&nbsp; grid-auto-rows: 300px;&nbsp; grid-gap: 20px;}.item {&nbsp; background: #bfbfbf;}* {&nbsp; box-sizing: border-box;&nbsp; margin: 0;&nbsp; padding: 0;}body {&nbsp; background: #1f1f1f;}<div class="content">&nbsp; <div class="search">&nbsp; &nbsp; <input type="text" placeholder="search" class="search-input" />&nbsp; </div>&nbsp; <div class="grid">&nbsp; &nbsp; <div class="item">Card 1</div>&nbsp; &nbsp; <div class="item">Card 2</div>&nbsp; &nbsp; <div class="item">Card 3</div>&nbsp; &nbsp; <div class="item">Card 4</div>&nbsp; </div></div>

富国沪深

您可以从网格卡中获取尺寸作为“宽度”,并将尺寸设置为上面的 div。这里是下面的 javascript。<script>&nbsp; &nbsp;//Get one card from the grid&nbsp; &nbsp;var card1 = document.getElementsByClassName('item')[0];&nbsp; &nbsp;//Get width of this card&nbsp; &nbsp;var card1Width = card1.offsetWidth;&nbsp; &nbsp; //Get your search div&nbsp; &nbsp; var searchDiv = document.getElementsByClassName('searchDiv')[0];&nbsp; &nbsp; //set the card's width on search div&nbsp; &nbsp; &nbsp;searchDiv.style.width = card1Width+"px";&nbsp; &nbsp;</script>
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

Html5