亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

css 3 grid-如何對齊圖像?

css 3 grid-如何對齊圖像?

撒科打諢 2023-09-11 15:22:59
我正在嘗試使用 CSS 3 Grid 使用我導入的圖像對我的主頁進行一些特定的放置。這就是我想要實現的目標:這就是我目前網格上的內容:這是我的代碼:<div class="wrapper">    <div class="bed"><img src="http://placehold.it/300x300" alt=""></div>    <div class="pillow"><img src="http://placehold.it/300x300" alt=""></div>    <div class="kitchen"><img src="http://placehold.it/300x300" alt=""></div>    <div class="living-room"><img src="http://placehold.it/300x300" alt=""></div>    <div class="sofa"><img src="http://placehold.it/300x300" alt=""></div></div>@endsection@push('style')<style>.wrapper{    display: grid;    grid-template-columns: 1fr 0.5fr 1fr ;    grid-auto-rows: minmax(100px,auto);    padding: 1em;}.wrapper >div{padding: 1em;}.bed{ height: 50%;}.pillow{ height: 50%; width:100%;}.kitchen{    height: 50%;}.living-room{    height: 70%;    width:150%;}.sofa{    height: 50%;    width:150%;}img{    width:100%;    height: 100%;    border-radius: 20px;}如何排列圖像,使其與預期結果完全一致?
查看完整描述

1 回答

?
慕尼黑8549860

TA貢獻1818條經驗 獲得超11個贊

更新

我刪除了800px/600px明確的高度,網格默認填充整個屏幕。


為簡單起見,我拉伸了所有圖像以填充整個網格單元。需要注意的是grid-rowgrid-column值是如何運作的。通過指定每個網格單元應跨越多遠,高度和寬度自然分布在整個網格中。對于這個例子,我將網格設置為800px寬和600px高。

我使用fr網格規則的單位,因此它們將根據與其他孩子的關系相對分布。下面一行告訴瀏覽器將網格設置為 8 個單位長。第一列將是總寬度的 3/8(800px在本例中)。第二列看起來比其他列窄,所以我做到了2fr。

grid-template-columns: 3fr 2fr 3fr;

-1當您在網格子測量中看到 a 時,本質上意味著轉到末尾。例如,以下代碼片段表示從第 3 行開始并跨越到末尾,無論有多少行。

grid-row: 3 / -1;

演示

.wrapper {

  display: grid;

  grid-template-columns: 3fr 2fr 3fr;

  grid-template-rows: repeat(8, 1fr);

  padding: 1em;

  grid-gap: 0.5em;

  background-color: #eee;

}


.wrapper>div {

  position: relative;

}


.wrapper>div::after {

  position: absolute;

  transform: translate(-50%, -50%);

  top: 50%;

  left: 50%;

  background-color: #333;

  color: white;

  padding: .5rem;

}


.bed {

  grid-column: 1;

  grid-row: 1 / 3;

}


.bed::after {

  content: 'BED';

}


.pillow {

  grid-column: 2;

  grid-row: 1 / 3;

}


.pillow::after {

  content: 'PILLOW';

}


.kitchen {

  grid-column: 3;

  grid-row: 2 / 5;

}


.kitchen::after {

  content: 'KITCHEN';

}


.living-room {

  grid-column: 1 / 3;

  grid-row: 3 / -1;

}


.living-room::after {

  content: 'LIVING ROOM';

}


.sofa {

  grid-column-start: 3;

  grid-row: 5 / -1;

}


.sofa::after {

  content: 'SOFA';

}


img {

  width: 100%;

  height: 100%;

}

<div class="wrapper">


  <div class="bed"><img src="http://placehold.it/300x300" alt=""></div>

  <div class="pillow"><img src="http://placehold.it/300x300" alt=""></div>

  <div class="kitchen"><img src="http://placehold.it/300x300" alt=""></div>

  <div class="living-room"><img src="http://placehold.it/300x300" alt=""></div>

  <div class="sofa"><img src="http://placehold.it/300x300" alt=""></div>


</div>

jsFiddle


查看完整回答
反對 回復 2023-09-11
  • 1 回答
  • 0 關注
  • 95 瀏覽

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號