Question

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

我有一个水平网格，我希望基于div zoom中的CSS缩放组合。

所以我在亲戚中有一个父div，然后在绝对中包含一个包含8个元素的网格的div子。

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

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

当我点击doc 1和doc 2时，我只想要顶行，因为这很简单，它是css声明的顺序。

为此，我使用完全符合我需要的translateY函数。

我的问题是针对下面的部分，我想在文档1下面有两行，当它是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

真的很抱歉我的坏榜样。

我还在睡觉。

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

想法（也许它很糟糕）：基本上，我有两个垂直对齐的div。

我希望当我在第一个div和/或第二个div上应用translateY作为第一个div的大小。

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

示例：addClass添加translateY（-25％），div的顶部为25％，添加其他类添加translateY（25％），div底部为25％。

PS：我尝试放置一个flexbox但是当我使用translateY时，flexbox不适合。我真的想使用translateY，因为它尊重比例。 translateY（-25％）允许将25％的div子项放在父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%);
}

对齐儿童Div底部

1 个答案: