Html Flex/Grid-2列，但第1列内部也有2列

我试图实现我的html部分是两列的，但是第一列中也有两列

我尝试使用网格行、网格列和flexbox

一个容器，则左侧网格列为66%，右侧列为33%。 见：

好像不行。

---

有什么简单的解决方法吗？

我会使用display:flex。然后在这些弯曲的盒子里，你可以使用更多的弯曲盒子

您可以将“弯曲方向”切换为“列”，以垂直而不是水平排列内容，并对齐项目拉伸以使内容在高度上相等，或将内容浮动在中心。如果你把所有这些东西配对，你就会得到你想要的输出

我会这样做：

/*概述*/
* {
保证金：0；
填充：0；
框大小：边框框！重要；
位置：相对位置；
单词包装：打断单词；
}
@媒体屏幕和屏幕（最大宽度：1023px）{
* {
文本对齐：居中；
}
}
身体{
宽度：100%；
身高：100%；
}
/*总论*/
.集装箱{
宽度：100%；
最大宽度：1248px；
边距：0自动；/*中心容器*/
填充：10px；/*这与div中的边距相结合将使边距看起来一致*/
框大小：边框框；
显示：-网络工具包盒；
显示器：-moz盒；
显示：-ms flexbox；
显示：-webkit flex；
显示器：flex；
-webkit柔性包装：包装；
柔性包装：包装；
弹性方向：行；/*按行排序*/
对齐项目：拉伸；
证明内容：之间的空间；
文本对齐：居中；
}
.容器.容器内部{
宽度：计算（（100%/2）-20px）；/*计算最大精度的宽度|减去余量*/
边距：10px；/*方框之间的间距*/
填充：20px；/*框内空间*/
框大小：边框框；/*计算边框和填充宽度*/
显示：-网络工具包盒；
显示器：-moz盒；
显示：-ms flexbox；
显示：-webkit flex；
显示器：flex；
-webkit柔性包装：包装；
柔性包装：包装；
弹性方向：行；/*按列排序*/
对齐项目：居中；
证明内容：中心；
flex grow:1；/*强制下方的单数div为全宽*/
背景色：rgba（0,0,0,0.25）；
}
@媒体屏幕和（最小宽度：640像素）和（最大宽度：1023像素）{
.容器.容器内部{
宽度：计算（（100%/2）-20px）；/*计算最大精度的宽度|减去余量*/
}
}
@媒体屏幕和屏幕（最大宽度：639px）{
.容器.容器内部{
宽度：100%；/*计算最大精度的宽度|减去余量*/
}
}
.容器.容器列1.容器内容{
宽度：计算（（100%/2）-20px）；/*计算最大精度的宽度|减去余量*/
边距：10px；/*方框之间的间距*/
填充：20px；/*框内空间*/
框大小：边框框；/*计算边框和填充宽度*/
显示：-网络工具包盒；
显示器：-moz盒；
显示：-ms flexbox；
显示：-webkit flex；
显示器：flex；
-webkit柔性包装：包装；
柔性包装：包装；
弹性方向：列；/*按列排序*/
对齐项目：居中；
证明内容：中心；
flex grow:1；/*强制下方的单数div为全宽*/
背景色：rgba（0,0,0,0.25）；
}
@媒体屏幕和屏幕（最大宽度：1023px）{
.容器.容器内部{
宽度：100%；/*计算最大精度的宽度|减去余量*/
}
}
.容器.容器列2.容器内容{
宽度：计算（100%-20px）；/*计算最大精度的宽度|减去余量*/
边距：10px；/*方框之间的间距*/
填充：20px；/*框内空间*/
框大小：边框框；/*计算边框和填充宽度*/
显示：-网络工具包盒；
显示器：-moz盒；
显示：-ms flexbox；
显示：-webkit flex；
显示器：flex；
-webkit柔性包装：包装；
柔性包装：包装；
弹性方向：列；/*按列排序*/
对齐项目：居中；
证明内容：中心；
flex grow:1；/*强制下方的单数div为全宽*/
背景色：rgba（0,0,0,0.25）；
}
h1{
边缘底部：20px；
}

乱数假文
我的同僚们都是精英。Omnis nemo是一种选择！在威尼斯，除了对赞美之词和赞美之词进行解释的特殊选择之外，没有其他选择

乱数假文
我的同僚们都是精英。Omnis nemo是一种选择！在威尼斯，除了对赞美之词和赞美之词进行解释的特殊选择之外，没有其他选择

乱数假文
我的同僚们都是精英。Omnis nemo是一种选择！在威尼斯，除了对赞美之词和赞美之词进行解释的特殊选择之外，没有其他选择

CSS网格可以做到这一点


.grid{
显示：网格；
网格模板列：重复（3，1fr）
}
.grid__行{
网格柱：1/-1；
背景：粉红色；
}
.grid\uuu col{
背景：浅绿色；
最小宽度：0；
}
.grid\uuu col--三分之二{
显示：网格；
网格模板列：重复（2，1fr）；
网格柱：1/3；
背景：浅蓝色；
}

全宽行
Laag 1:Bewustzijn
Laag 2:Bewustzijn
Laag 3:Bewustzijn
Laag 4:Bewustzijn
我的同僚们都是精英。多洛里伯斯，多洛伦？
我使用网格作为解决方案。你可以查看代码笔链接


*{
保证金：0；
填充：0；
框大小：边框框；
}
.集装箱{
宽度：1000px；
保证金：30像素自动；
显示：网格；
网格模板行：重复（4100px）；
网格模板列：重复（3，1fr）；
栅隙：10px；
& > * {
背景色：#FF7373；
字体大小：25px；
颜色：#FFF；
填充：20px；
字体系列：无衬线；
}
}
.1分{
网格行：1/2；
网格柱：1/2；
}
.2分{
网格行：1/2；
 <div class="grid"></div>
              <div class="grid__row"></div>
              <div class="grid__col grid__col--two-thirds">
                <div class="score">Laag 1: Bewustzijn</div>
                <div class="score">Laag 1: Bewustzijn</div>
                <div class="score">Laag 1: Bewustzijn</div>
                <div class="score">Laag 1: Bewustzijn</div>
              </div>
              <div class="grid__col">dfgkfdjglkfdjgkfdjglkfdjglkfdjglkfdjglkdfg</div>

.grid {
    position: relative;
    margin-right: auto;
    margin-left: auto;
    padding-right: 16px;
    max-width: 1080px;
    width: 100%;
}

.grid__row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-right: -16px;
    margin-left: -16px;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
}

.grid__col, .grid__spacer {
    padding-left: 16px;
    padding-right: 16px;
    max-width: 100%;
}

.grid__col--two-thirds {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 66.6667%;
    flex: 0 0 66.6667%;
}