主页 / 问题 / 1604090
Accepted
Лена
Asked:2025-01-05 12:32:05 +0000 UTC2025-01-05 12:32:05 +0000 UTC

块的排列，父级的属性为 flex

  • 772

* {
  position: relative;
  padding: 0;
  margin: 0;
  outline: none;
  letter-spacing: 1px;
  box-sizing: border-box;
  scrollbar-width: none;
  -webkit-tap-highlight-color: transparent
}

main {
  display: flex;
  flex-wrap: wrap;
  gap: 25px;
  padding: 25px;
  height: 1000px;
  width: 500px;
  margin: 0 auto;
}

.blok1 {
  background: green;
  height: 100px;
  flex: 1;
  padding: 50px;
}

.blok2 {
  background: #ff0000;
  padding: 50px;
}
<main>
  <div class='blok1'></div>
  <div class='blok1'></div>
  <div class='blok2'></div>
</main>

如何放置 2 个绿色块，一个在另一个下面。须符合以下条件

  1. 父级必须具有 display:flex
  2. 嵌套结构应保持不变。也就是说，无需将其包裹在额外的层中。有一个父块和 3 个子块。
  3. 绿色块的高度可能会有所不同。即内容的高度与红色相同。绿色边可能是 100 像素高，红色边是 1000 像素高

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
main {
  --gap: 25px;
  --height: 100vh;  
  display: flex;
  gap: var(--gap);
  flex-wrap: wrap;
  flex-direction: column;
  height: var(--height);
  padding: var(--gap);
  align-content: center;
}
.block1,
.block2 {
    width: 70%;
    max-width: min(calc(50vh*(16 / 9)), 70%);
    background: #cfc;
}
.block3 {
  flex: 0 0 100%;
  width: calc(30% - var(--gap));
  background: #fcc
}
.block3, .block1, .block2 {padding: 0.5em;}
<main>
  <div class="block1">
    <h2>block1</h2>
     Text Text Text Text Text Text 
  </div>
  <div class="block2">
    <h2>block2</h2>
    Text Text Text Text Text Text Textext Text Text Text Text Text Textext Text Text Text Text  
  </div>
  <div class="block3">
     Text Text Text Text Text Text Text 
  </div>
</main>

部分实现。仅当总高度超过红色时。他们跳过去，站成一排……

网格示例

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
main {
    display: grid;
    gap: 10px;
    grid-template:
        "a c" auto
        "b c" auto / min(calc(50vh*(16 / 9)), 70%) 30%;
    padding: 10px;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    justify-content: center;
}
.block1 {grid-area: a}
.block2 {grid-area: b}
.block1, .block2 {background: #cfc}
.block3 {
  grid-area: c;
  grid-row: 1 / 3;
  background: #fcc
}
main > div {padding: 0.5em;}
<main>
  <div class="block1">
    Text Text Text Text Text Text 
  </div>
  <div class="block2">
    Text Text Text Text Text Text Text 
  </div>
  <div class="block3">
   Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
   Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
   Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
   Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
  </div>
</main>

这似乎有效，但是...怎么做呢。使绿色的高度与内容一致，而不是拉伸...如果你尝试按下它，间隙就会被打破。

它似乎保留了网格，位置是正确的，但它没有按下绿色块......

html

4 个回答

  1. Best Answer

    选项开启GRID

    * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
main {
    display: grid;
    gap: 10px;
    grid-template:
        "a c" auto
        "b c" 1fr / min(calc(50vh*(16 / 9)), 70%) 30%;
        /*!!!!!!!!!!!!*/
        
    padding: 10px;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    justify-content: center;
}
.block1 {grid-area: a}
.block2 {grid-area: b}
.block1, .block2 {
background: #cfc;
align-self: start; /*!!!!!!!!!*/
}
.block3 {
  grid-area: c;
  grid-row: 1 / 3;
  background: #fcc
}
main > div {padding: 0.5em;}
    <main>
  <div class="block1">
    Text Text Text Text Text Text 
  </div>
  <div class="block2">
    Text Text Text Text Text Text Text 
  </div>
  <div class="block3">
   Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
   Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
   Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
   Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
  </div>
</main>

    选项打开flex（注意！已使用position: absolute）

    * {
  padding: 0;
  margin: 0;
  outline: none;
  letter-spacing: 1px;
  box-sizing: border-box;
}

main {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  gap: 25px;
  padding: 25px;
  width: 500px;
  margin: 0 auto;
  position: relative;
}

main > *{
  padding: 25px;
  width: 45%;
}

.blok1 {
  background: green;
  height: 100px;
  flex-grow: 0;
  flex-shrink: 0;
  align-self: start;
}

.blok2 {
  background: red;
  height: 100%;
  flex-grow: 1;
  align-self: end;
  position: absolute;
}
    <main>
  <div class='blok1'>1</div>
  <div class='blok1'>2</div>
  <div class='blok2'>3</div>
</main>

    UPD 添加了一个稍微更新的版本（再次在GRID）：

    现在，布局与绿色元素数量的绑定不再那么严格（请参阅注释.block3）

    main {
  display: grid;
  gap: 10px;
  grid-auto-rows: auto;
  grid-template-columns: min(calc(50vh*(16 / 9)), 70%) 30%;
  grid-auto-flow: column dense;

  padding: 10px;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

main > div:not(.block3) {
  background: #cfc;
  grid-column: 1;
}

.block3 {
  background: #fcc;
  grid-row: 1 / span 9;
  /* в спане нужно указать число больше чем есть зеленых элементов */
}
    <main id='x'>
  <div class="block1" contenteditable>здесь</div>
  <div class="block2" contenteditable>можно</div>
  <div class="block3" contenteditable>
    Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
    Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
  </div>

  <div class="block2" contenteditable>что-то</div>
  <div class="block2" contenteditable>
    -----------------------------<br>
    написать</div>
  <div class="block2" contenteditable>
    Text Text Text Text Text Text Text<br>
    Text Text Text Text Text Text Text
  </div>
</main>

    • 3 

  2. * {
  position: relative;
  padding: 0;
  margin: 0;
  outline: none;
  letter-spacing: 1px;
  box-sizing: border-box;
  scrollbar-width: none;
  -webkit-tap-highlight-color: transparent
}

main {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column; // с помощю этого свойство блоки будут идти вниз
  gap: 25px;
  padding: 25px;
  height: 1000px;
  width: 500px;
  margin: 0 auto;
}

.blok1 {
  background: green;
  height: 100px;
  flex: 1;
  padding: 50px;
}

.blok2 {
  background: #ff0000;
  padding: 50px;
}

    • 1 

  3. {
    position: relative;
    padding: 0;
    margin: 0;
    outline: none;
    letter-spacing: 1px;
    box-sizing: border-box;
    scrollbar-width: none;
    -webkit-tap-highlight-color: transparent;
}
    
main {
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
    padding: 25px;
    height: 1000px;
    width: 500px;
    margin: 0 auto;
}
    
.blok1 {
    background: green;
    padding: 50px; 
    flex-basis: 100%; 
}       
    
.blok2 {
    background: #ff0000;
    padding: 50px;
}
    <main>
    <div class='blok1'></div>
    <div class='blok1'></div>
    <div class='blok2'></div>
</main>

    • 0

  4. 也许像这样？：

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex Example</title>
<style>
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  main {
    display: flex;
    flex-wrap: nowrap; /* Блоки не переносятся */
    gap: 25px; /* Расстояние между блоками */
    height: 100vh; /* Высота страницы */
    padding: 25px; /* Внутренний отступ */
  }

  .left-column {
    display: flex;
    flex-direction: column; /* Вертикальное расположение зеленых блоков */
    gap: 25px;
    flex: 0 0 auto; /* Фиксированная ширина */
  }

  .blok1 {
    background: green;
    flex: 1 0 auto; /* Высота определяется содержимым */
    padding: 20px;
  }

  .blok2 {
    background: red;
    flex: 1 0 auto; /* Высота определяется содержимым */
    padding: 20px;
    width: 100%; /* Заполняет оставшееся пространство */
  }
</style>
</head>
<body>
<main>
  <div class="left-column">
    <div class="blok1">Зеленый блок 1</div>
    <div class="blok1">Зеленый блок 2</div>
  </div>
  <div class="blok2">Красный блок</div>
</main>
</body>
</html>

    • 0

相关问题