Question

我对以下问题感到高兴。

假设我的结构如下

<div class="full_row">
  <div class="content_left"></div>
  <div class="content_right">
    <div class="inner_row"></div>
    <div class="inner_row"></div>
  </div>
</div>

使用以下CSS：

.full_row {
  background: lightgrey;
  border: 1px solid grey;
  width: 400px;
}

.content_left {
  height: 100%;
  float: left;
}

.content_right {
  float: left;
  border: 2px solid grey;
}

.inner_row {
  height: 25px;
  width: 250px;
  border: 1px solid white;
}

我如何实现以下目标：

content_right知道它应该是50px高（因为它有两个孩子，每个25px高）
full_row知道它应该是50px高（因为它最大的孩子是50px高）
content_left将是50px高，100％的full_row高度。
红利问题：我可以让content_left知道它应该是150px宽，以填补content_right（400px-250px）留给他的空白吗？

我想用简单的CSS做这件事，因为我想让事情变得有光泽＆amp;动画他们。我有一个包含所需状态的codepen（以及上面的示例）here。

老实说，我试图在Stackoverflow＆amp;谷歌，发现了父母身高何时知道的一些例子。但是没有找到一个例子，其中一个孩子确定其父母的高度，这又决定了另一个孩子的身高;我几乎没有开始使用html / css。

非常感谢帮助。

Answer 1

开始学习Flexbox的时间！看看这个例子。

.full_row {
	display: flex;
}

.full_row > div {
	width: 50%;
	padding: 10px;
}
.content_left{
	background: red;
}
.content_right{
	background: blue;
}

<div class="full_row">
  <div class="content_left">aaaa</div>
  <div class="content_right">
    <div class="inner_row">bbbb</div>
    <div class="inner_row">cccc</div>
  </div>
</div>

Answer 2

Flexbox可能是这样的好选择。我记住了列的自定义大小：

＆＃13;

.full_row {
  background: lightgrey;
  border: 1px solid grey;
  width: 400px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

.content_left {
  height: 100%;
  flex-grow: 1;
}

.content_right {
  border: 2px solid grey;
  flex-direction: column;
}

.inner_row {
  height: 25px;
  width: 250px;
  border: 1px solid white;
}

＆＃13;

<div class="full_row">
  <div class="content_left">left</div>
  <div class="content_right">
    <div class="inner_row"></div>
    <div class="inner_row"></div>
  </div>
</div>

＆＃13;

Answer 3

我想有几种方法可以做到这一点，但不知道你确切的目标是什么，这是一个解决方案：

library(zoo)
library(data.table)
setDT(dt)

dt[, ym := as.yearmon(mth)]

ct_dt = setorder(unique(dt[, .(user, ym)]))[,
  last_ym := shift(ym)
, by=user][, .(
  new         = sum(is.na(last_ym)), 
  not_last_ym = sum(is.na(last_ym) | 12*(ym - last_ym) > 1)
), by=ym]

重要提示：请记得浮动：远离内容。如果你想确定，我仍然不知道你想要的结果，但添加浮动：对你正确的内容是正确的。

自动设置父级有两个孩子的高度，省略父级和子级别之一的高度

3 个答案: