我希望網(wǎng)格上方的搜索輸入與網(wǎng)格大小相同。當(dāng)您最初在分辨率足夠大的設(shè)備上加載它時(shí)，它們看起來是一樣的，但是當(dāng)您開始縮小瀏覽器視口，以便每行只適合一張卡片時(shí)，網(wǎng)格會(huì)變小，但是，上面的 div包含搜索輸入不包含。我想讓搜索 div 具有反應(yīng)性，以便它可以為分辨率較小的用戶調(diào)整大小。也許有某種方法可以實(shí)際放入網(wǎng)格中，我只是不知道該怎么做。我創(chuàng)建了以下 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>
3 回答
海綿寶寶撒
TA貢獻(xiàn)1809條經(jīng)驗(yàn) 獲得超8個(gè)贊
您的代碼幾乎是正確的，但缺少一些東西。您box-sizing: border-box;與.content類屬性一起使用margin: 20px 20px;會(huì)在較小的設(shè)備中產(chǎn)生問題。.content應(yīng)該是margin: 0 auto;和padding: 20px 15px;。你用grid-template-columns: repeat(auto-fill, minmax(450px, 450px));. 它不適用于較小的設(shè)備，因?yàn)樵O(shè)備尺寸小于450px您將看到的水平滾動(dòng)條。您可以使用@media重寫grid屬性。下面我將修改您的css屬性和HTML片段。
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background: #1f1f1f;
margin: 0;
padding: 0;
}
.content {
display: flex;
flex-direction: column;
/* height: 100%; */ /* You no need to use height 100% here. It have no effect */
min-height: 100vh;
justify-content: center;
max-width: 920px;
margin: 0 auto;
padding: 20px 15px;
width: 100%;
}
.grid {
display: grid;
/* height: 100%; */
grid-template-columns: repeat(2, 1fr);
grid-gap: 20px;
}
@media (max-width: 767px){
.grid{
grid-template-columns: 100%;
}
}
.search {
display: flex;
flex-direction: column;
width: 100%;
margin-bottom: 40px;
/* grid-area: auto / auto; */
}
.search-input {
height: 40px;
background-color: white;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 4px;
padding: 6px 12px;
width: 100%;
}
@media (max-width: 767px){
.search-input{
max-width: 450px;
margin-left: auto;
margin-right: auto;
}
}
.item {
width: 100%;
height: 300px;
background: #bfbfbf;
max-width: 450px;
margin-left: auto;
margin-right: auto;
}
<div class="content">
<div class="search">
<input type="text" placeholder="search" class="search-input" />
</div>
<div class="grid">
<div class="grid-item"><div class="item">Card 1</div></div>
<div class="grid-item"><div class="item">Card 2</div></div>
<div class="grid-item"><div class="item">Card 3</div></div>
<div class="grid-item"><div class="item">Card 4</div></div>
</div>
</div>
眼眸繁星
TA貢獻(xiàn)1873條經(jīng)驗(yàn) 獲得超9個(gè)贊
我認(rèn)為您可以通過對(duì)代碼進(jìn)行一些修改來使布局正常工作：
在彈性容器中從 切換到
column。row wrap將搜索欄和網(wǎng)格設(shè)置為容器的 100% 寬度。
.content {
display: flex;
flex-wrap: wrap;
align-content: flex-start;
height: 100vh;
padding: 20px;
}
.search {
flex: 0 0 100%;
min-width: 450px;
margin-bottom: 40px;
}
.search-input {
width: 100%;
}
.grid {
flex: 1;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
grid-auto-rows: 300px;
grid-gap: 20px;
}
.item {
background: #bfbfbf;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background: #1f1f1f;
}
<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>
富國(guó)滬深
TA貢獻(xiàn)1790條經(jīng)驗(yàn) 獲得超9個(gè)贊
您可以從網(wǎng)格卡中獲取尺寸作為“寬度”，并將尺寸設(shè)置為上面的 div。
這里是下面的 javascript。
<script>
//Get one card from the grid
var card1 = document.getElementsByClassName('item')[0];
//Get width of this card
var card1Width = card1.offsetWidth;
//Get your search div
var searchDiv = document.getElementsByClassName('searchDiv')[0];
//set the card's width on search div
searchDiv.style.width = card1Width+"px";
</script>
- 3 回答
- 0 關(guān)注
- 134 瀏覽
添加回答
舉報(bào)
0/150
提交
取消