我正在使用顯示：flex；創建圖塊視圖。我試圖將第三張圖片放在第二張圖片下面。但是，每當我這樣做時，第三張圖片都會在第一張圖片下方，而不會在第二張圖片下方， @media screen and (min-width: 1000px) { .main { height:1800px; width: 100%; margin: 0px 0px 0px 0px; position: relative; z-index: 0; } .parallax { /* The image used */ background-image: url("https://i.ibb.co/r272XPt/2019-2020.png"); /* Set a specific height */ min-height: 400px; opacity: 60%; filter: blur(2px); -webkit-filter: blur(2px); /* Create the parallax scrolling effect */ background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; } .tiles{ position:relative; top:100px; width:90vw; margin-left:5vw; display: flex; flex-wrap: wrap; } .chromebookHelpdesk img{ margin-left:5vw; width:50vw; display:block; } .subhelp{ height:25vw; } .subhelp img{ margin-left:5vw; width:25vw; display:block; } .studentsTour img{ margin-left:5vw; width:20vw; margin-top:5vw; display:block; } #projects img { text-align: center; display: block; width: 25vw; margin: 20px; } .mission_logo { width: 200px; display: inline-block; float: left; text-align: center; } .mission { text-align: center; margin-top: 100px; font-size: 20px; } .ingenuity { color: #3cba54; font-size: 60px !important; } .creativity { color: #f4c20d; font-size: 60px !important; } .innovation { color: #db3236; font-size: 60px !important; } }
2 回答
手掌心
TA貢獻1942條經驗 獲得超3個贊
CSS Flexbox完整指南
.tiles {
? display: flex;
? flex-wrap: wrap;
? flex-direction: row;
? flex: 1;
}
.section {
? display: flex;
? flex: 1;
? flex-direction: column;
}
.item {
? display: flex;
? flex: 1;
? padding: 1rem;
? margin: 4px;
? background: green;
? color: white;
}
<div class="tiles">
? <div class="section">
? ? <div class="item">
? ? ? <p>Chromebook Helpdesk</p>
? ? </div>
? </div>
? <div class="section">
? ? <div class="item">
? ? ? <p>Sub Help</p>
? ? </div>
? ? <div class="item">
? ? ? <p>Student Tour</p>
? ? </div>
? </div>
</div>
呼喚遠方
TA貢獻1856條經驗 獲得超11個贊
如果您理解這個概念，那就很簡單了，下面是示例：
根據您的要求，您需要 2 列單行，因此您將創建
flex屬性，現在您需要 2 列，因此您將其設置flex:50%為 2?，F在進入您的圖像部分，您需要在下面放置 2 個圖像，因此您將提供height:50%(右圖），你將給出height:100%（左圖）。
您可以根據需要不斷更改尺寸。您還可以responsive為其添加設計。希望能幫助到你。
* {
box-sizing: border-box;
}
.row {
display: flex;
}
.column {
flex: 50%;
padding: 5px;
}
<div class="row">
<div class="column">
<img src="http://i183.photobucket.com/albums/x312/Tiefnuker/office_02_zpsdz0zixcd.jpg" style="width:100%" />
</div>
<div class="column">
<div class="row">
<img src="http://i183.photobucket.com/albums/x312/Tiefnuker/office_02_zpsdz0zixcd.jpg" style="width:50%" />
</div>
<div class="row">
<img src="http://i183.photobucket.com/albums/x312/Tiefnuker/office_02_zpsdz0zixcd.jpg" style="width:50%" />
</div>
</div>
</div>
- 2 回答
- 0 關注
- 160 瀏覽
添加回答
舉報
0/150
提交
取消