对齐子 div 底部

Question

我尝试建议使用某种缩放在 css 中进行简单对齐。

我有一个水平网格，我想要一个基于 div 子元素的 CSS 缩放组合。

所以我有一个相对的父 div，然后是一个包含 8 个元素的网格的绝对 div 子。

当我点击 doc 1 时，我希望前 2 行位于红色容器之外。

当我点击 doc 2 时，我希望顶列位于红色容器之外。

当我点击doc 1和doc 2时，我只想要最上面一行，因为很简单，就是css的声明顺序。

为此，我使用了绝对满足我需要的 translateY 函数。

我的问题在于下面的部分，当它是 doc 1 时我想要下面 2 行，当它是 doc 2 时我想要下面 6 行。但要做到这一点，我使用高度。

如果我单击 doc1 和 doc 2，我会在下面看到 3 行而不是 2 个首字母。

对齐不正确，目标是显示最大的区域

不知道是不是很清楚:)

https://codepen.io/marco93/pen/LLLBvR

    div.parent {
  width: 100px;
  height: 100px;
  outline: 1px solid red;
  margin: 100px;
  position: relative;
}

div.parent > div {
  position: absolute;
  display: flex;
  flex-direction: column;
  width: 90%;
  left: 5%;
}

div.parent > div > div {
  flex: 1 0 0;
}

div.doc1 > div > div, 
div.doc2 > div > div,
div.docx > div > div
{
  outline: 1px solid blue;
}

/* 6h à 18h */
div.doc1 > div {
  transform: translateY(-25%);
}

/* 3h à 6h */
div.doc2 > div {
  transform: translateY(-12.5%);
}

/* 3h à 6h */
div.doc2 > div {
  height: 800%;
}

/* 6h à 18h */
div.doc1 > div {
  height: 200%;
}

div.docx > div {
  transform: translateY(-25%);
  height: 100%;
}

button.press {
  box-shadow: 0 3px 0 #00823F;
}

Answer 1

真的很抱歉我的坏榜样。

我还在睡觉。

我做了一个更简单的例子来说明我的例子。

想法（也许不好）： 基本上，我有 2 个垂直对齐的 div。

当我在第一个 div 和/或第二个 div 上应用 translateY 时，我希望第一个 div 适合大小。

目标： 目标是在父 div 之外增加子 div，并按顶部或底部设置百分比。

示例：addClass 添加 translateY(-25%) 且 div 顶部为 25% 外，添加 Other Class 以添加 translateY(25%) 且 div 底部为 25% 外。

PS：我尝试放置一个 flexbox，但是当我使用 translateY 时，flexbox 不适合。 我真的很想使用 translateY，因为它尊重比例。 translateY (-25%) 允许在父 div 之外拥有 25% 的 div 子级，这正是我想要的 :)

我希望我的解释现在更清楚了。 ;)

https://codepen.io/marco93/pen/owGyrQ

<button id='up'>UP</button>
<button id='down'>DOWN</button> 
<div id="container">
  <div></div>
  <div></div>
</div>


button.press {
  box-shadow: 0 3px 0 #00823F;
}

div#container {
  height : 100px;
  width : 100px;
  margin : 100px;
  border : 1px solid red;
}

div#container>div {
  height : 100%;
  width : 90%;
  margin-left : 5px;
  border : 1px solid blue;
}

div#container.up>div:first-child {
  transform: translateY(-25%);
}

div#container.down>div:last-child {
  transform: translateY(25%);
}