無法將這兩列與子列集成：

子列不可能使用 flexbox

我被迫使用這種結構：

<div class="custom_classes">
<div class="custom_classes">col1</div>
<div class="custom_classes">col2</div>
<div class="custom_classes">col 2.1</div>
<div class="custom_classes">col 2.2</div>
<div>

uj5u.com熱心網友回復：

改用 CSS 網格

最簡單的方法是使用CSS grid（并且也是回應式的）

...這個css屬性 grid-column

這是grid-column-startand的簡寫grid-column-end

詳細資訊： https : //developer.mozilla.org/en-US/docs/Web/CSS/grid-column

使用 Firefox DevTools 我單擊代碼中的網格按鈕，這使我看起來像一個網格可視化工具......

在論文中，我開始考慮......并且我發現最好的方法是創建一個基于網格的 4 列。

如果你想學習，這里是代碼:)

body {
  display: grid;
  place-content: center;
  height: 100vh;
}

.container {
  display: grid;
  gap: 0.5em;
  height: 80vh;
  width: 80vw;
}

.container .child {
  background: lightblue;
  display: grid;
  place-content: center;
}

.child1 {
  grid-column: 1/2;
  grid-row: 1/3;
}

.child2 {
  grid-column: 2/4;
}

.child3 {
  grid-column: 2/3;
}

.child4 {
  grid-column: 3/4;
}

<!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">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="container">
    <div class="child child1">col1</div>
    <div class="child child2">col2</div>
    <div class="child child3">col 2.1</div>
    <div class="child child4">col 2.2</div>
  </div>
</body>

</html>

uj5u.com熱心網友回復：

使用彈性盒

.classes_container{
  background: whitesmoke;
  position: relative;
  width: 100%;
  height: 300px;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: 20px auto;
  display: flex;
}

.item{
  background: #d3f9d2;
  padding: 5px;
  margin: 5px;
  text-align: center;
  line-height: 200px;
  font-weight: bold;
  
}

.col1{
  width: 60%;
  height: 95%
}

.col2{
  width: 40%;
  height: 50%;
  
}

.col2_1{
  width: 18%;
  height: 39%;
  margin-right: 10px;
}
.col2_2{
  width: 18%;
  height: 39%;
  margin-left: 10px;
}

.col2_1 {
  align-self: end;
  position: absolute;
  right: 19%;
}

.col2_2 {
  align-self: end;
  position: absolute;
  right: 1px;
  
}

<div class="classes_container">
  <div class="col1 item">col1</div>
  <div class="col2 item">col2</div>
  <div class="col2_1 item">col 2.1</div>
  <div class="col2_2 item">col 2.2</div>
  <div>
</div>

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/393884.html

標籤：html css bootstrap-4 弹性盒

上一篇：Bootstrap輪播控制元件不起作用并且轉到下一張幻燈片需要太長時間

下一篇：《瘋狂Android講義》（第4版）李剛編著

子列不可能使用flexbox

改用 CSS 網格

如果你想學習，這里是代碼:)

使用彈性盒