Javascript 如何避免使用JS而只使用CSS？

经过几次测试，我还不能用纯css做我想做的事情。如何在不使用javascript的情况下获得与下面示例相同的结果

有没有可能用纯css实现这一点

谢谢

var main=document.getElementsByClassName（'container'）；
对于（var i=0；i

.container{
宽度：100%；
背景：黄色；
位置：相对位置；
边缘底部：10px；
}
.左撇子{
宽度：40%；
高度：120px；
背景：红色；
位置：绝对位置；
最高：50%；
转化：translateY（-50%）；
}
.好孩子{
宽度：60%；
高度：180像素；
背景：蓝色；
位置：绝对位置；
最高：50%；
转化：translateY（-50%）；
左：40%；
}

像这样吗

我在

.container

中添加了

height

，因为子对象是绝对定位的，所以它们不在文档流中，这就好像

.container

根本没有子对象一样

至于

高度：对于
.right child
，它是100%

，因此它取相对位置最近的元素的高度，即

.container

.container{
宽度：100%；
高度：200px；
背景：黄色；
位置：相对位置；
边缘底部：10px；
}
.左撇子{
宽度：40%；
高度：120px；
背景：红色；
位置：绝对位置；
最高：50%；
转化：translateY（-50%）；
}
.好孩子{
宽度：60%；
身高：100%；
背景：蓝色；
位置：绝对位置；
最高：50%；
转化：translateY（-50%）；
左：40%；
}

---

您可以使用

flexbox

来实现，只需添加

display:flex；对齐项目：居中到
容器

然后删除
位置：绝对
和
转换-翻译
之类的东西，你就会得到一个干净的CSS


.container{
背景：黄色；
边缘底部：10px；
显示：flex；/*已添加属性*/
对齐项目：居中；/*添加属性*/
}
.左撇子{
宽度：40%；
高度：120px；
背景：红色；
}
.好孩子{
宽度：60%；
高度：180像素；
背景：蓝色；
}

另一种方式：

.container {
  width: 100%;
  background: yellow;
  overflow:hidden;
  margin-bottom: 10px;
}
.left-child {
  margin-top:30px;
  width: 40%;
  height: 120px;
  background: red;
  float:left;
}
.right-child {
  width: 60%;
  height: 180px;
  background: blue;
  float:right;
}

没有
位置的解决方案：相对
或
位置：绝对


.container{
宽度：100%；
背景：黄色；
边缘底部：10px；
显示：内联块；
}
.左撇子{
宽度：40%；
高度：120px；
背景：红色；
边缘顶部：30px；
显示：内联块；
}
.好孩子{
宽度：60%；
高度：180像素；
背景：蓝色；
显示：内联块；
浮动：对；
}

鉴于
.right child
元素的高度在CSS中是硬编码的，那么在JS中设置父元素的高度有什么意义呢？只需将
height:180px
设置在
.container
上，但我想将container的高度值设置为“auto”。container{height:auto；}是我想做的事情所必需的。为什么在问题tho'？@KingKing上投反对票有时，一旦你看到这个问题已经有了一些反对票，就很容易投反对票，你认为这是一种有建设性的方式来看待一些问题吗？一个拥有40k rep.@ZombieChowder的人做出了一个非常奇怪的解释，你没有多少经验去感受这个事实。我从来没有做过那样的事。但我相信其他一些人已经这样做了，也将一直这样做。我已经测试了这项工作！非常感谢你们。