我有兩個 div，中間有一個空磁區：
<div>
<div style='float:left; width:10%'>A<div>
<div style='float:right; width: 80%'>B</div>
<div>
當我縮小螢屏時，我希望 A 位于 B 之上。
我見過的一種解決方案是浮動 A 和 B left，但問題是當 A 和 B 并排時，我需要在 A 和 B 之間保留空緩沖區。向左浮動 A 和 B 會導致它們在水平時彼此相鄰。
我還考慮過在 A 和 B 之間創建一個空的固定寬度 div 并將所有的都向左浮動，但是，我不希望在 A 和 B 之間垂直堆疊一個空緩沖區。
我可以在這里使用不同的解決方案嗎？
uj5u.com熱心網友回復：
CSS Grid 是一個很好的解決方案。請參閱下面的片段。您必須“整頁”查看代碼段才能查看桌面版與移動版。斷點設定為 720px。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<link rel="icon" href="images/logo.png" type="image/x-icon">
<title>Test</title>
<style>
body {
font-family: monospace;
font-size: 32px;
padding: 50px;
color: white;
}
.container {
display: flex;
width: 100%;
flex-direction: column;
}
@media only screen and (min-width: 720px) {
.container {
grid-column: 1 / -1;
grid-gap: 24px;
display: grid;
grid-template-columns: 10% 80%;
justify-content: center;
}
}
.box-1 {
background: #7FB9D5;
width: 100%;
height: 200px;
justify-content: center;
align-items: center;
display: flex;
margin: 12px 0;
}
.box-2 {
background: #FF5C5C;
width: 100%;
height: 200px;
justify-content: center;
align-items: center;
display: flex;
margin: 12px 0;
}
</style>
</head>
<body>
<div class="container">
<div class="box-1">A</div>
<div class="box-2">B</div>
</div>
</body>
</html>uj5u.com熱心網友回復：
一種解決方案是使用帶有flex-wrapset towrap和a 的 flexbox 布局gap。
這是一個帶有示例的指南：https : //web.archive.org/web/20211121030934/https : //css-tricks.com/snippets/css/a-guide-to-flexbox/
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/364566.html
上一篇：單擊并按住時將按鈕移動一些像素