Html 具有多行的列的CSS对齐

我有以下代码片段

.striped{
高度：30px；
右边距：1px！重要；
背景：重复线性梯度（-45度，#e403d，#e403d 10px，#222 10px，#222 20px）！重要；
}
.内容{
身高：100%；
}
.mymedia{
字体大小：1.5vh！重要；
颜色：#fff；
文本对齐：对齐；
-ms文本对齐：词间对齐；
文本对齐：词间对齐；
边框颜色：#E4003D；
字体大小：正常！重要；
背景色：#3636！重要；
背景：重复线性梯度（-45度，#111 2px，#222 3px，#222 4px，#111 7px）！重要；
}
.右侧填充{
右边距：1px！重要；
}
.top缓冲区{
边缘顶端：13px；
溢出：隐藏；
}
.底部{
垂直对齐：底部对齐；
底部：0！重要；
}
.nolrpadding{
左侧填充：0！重要；
右边填充：0！重要；
}
.mymedia>p{
左边距：5vw！重要；
保证金权利：5vw！重要；
}
* {
-webkit边界半径：0！重要；
-moz边界半径：0！重要；
边界半径：0！重要；
}
.方盒{
位置：相对位置；
宽度：95%；
溢出：隐藏；
字体大小：2vh！重要；
字体大小：粗体！重要；
背景：重复线性梯度（-45度，#e4003d2px，#d6003d3px，#d6003d4px，#e4003d7px）！重要；
}
.方盒：之前{
内容：“；
显示：块；
填充顶部：100%；
}
.正方形内容{
位置：绝对位置；
排名：0；
左：0；
底部：0；
右：0；
颜色：白色；
}
.广场内容分区{
显示：表格；
宽度：100%；
身高：100%；
}
.方形内容跨度{
显示：表格单元格；
文本对齐：居中；
垂直对齐：中间对齐；
颜色：白色；
}
诺赖特先生{
右边距：0！重要；
}
诺列夫特马金先生{
左边距：0！重要；
}
.行[类*=“列-”]{
保证金底部：-99999像素；
填充底部：99999像素；
}
.行{
溢出：隐藏；
}

以及

将所有内容包装在

中，并将孩子设置为

最小高度：100%

将所有内容包装在

中，并将孩子设置为

最小高度：100%

只需一点jq即可完成您想要的任务。希望您不介意

点击这里

css添加的代码：

.mymedia{height:100%；}

jq新增代码：

var result = $(".col-xs-7").height() - $(".row.striped").height()*2
$(".row.rightpadding").height(result)

结果=右列的高度-两个条带行的高度（我认为相等）

然后将该高度添加到中间行（

.row.rightpadding

）

---

如果有帮助，请告诉我。

只需一点jq就可以满足您的需求。希望您不介意

点击这里

css添加的代码：

.mymedia{height:100%；}

jq新增代码：

var result = $(".col-xs-7").height() - $(".row.striped").height()*2
$(".row.rightpadding").height(result)

结果=右列的高度-两个条带行的高度（我认为相等）

然后将该高度添加到中间行（

.row.rightpadding

）

---

如果有帮助，请告诉我。

您应该能够通过使用绝对定位实现所需的功能，固定顶部和底部，以便将左列元素“捕捉”到行的高度

请尝试下面的代码片段

.striped{
高度：30px；
背景：重复线性梯度（-45度，#e403d，#e403d 10px，#222 10px，#222 20px）！重要；
位置：绝对位置；
左：0；
右：15px；
}
.内容{
身高：100%；
}
.mymedia{
字体大小：1.5vh！重要；
颜色：#fff；
文本对齐：对齐；
-ms文本对齐：词间对齐；
文本对齐：词间对齐；
边框颜色：#E4003D；
字体大小：正常！重要；
背景色：#3636！重要；
背景：重复线性梯度（-45度，#111 2px，#222 3px，#222 4px，#111 7px）！重要；
顶部：30px；
底部：30px；
左：0；
右：15px；
位置：绝对位置；
页边距顶部：0！重要；
}
.顶部缓冲器{
边缘顶端：13px；
溢出：隐藏；
}
.底部{
底部：0！重要；
}
.nolrpadding{
左侧填充：0！重要；
右边填充：0！重要；
}
.mymedia>p{
左边距：5vw！重要；
保证金权利：5vw！重要；
}
* {
-webkit边界半径：0！重要；
-moz边界半径：0！重要；
边界半径：0！重要；
}
.方盒{
位置：相对位置；
宽度：95%；
溢出：隐藏；
字体大小：2vh！重要；
字体大小：粗体！重要；
背景：重复线性梯度（-45度，#e4003d2px，#d6003d3px，#d6003d4px，#e4003d7px）！重要；
}
.方盒：之前{
内容：“；
显示：块；
填充顶部：100%；
}
.正方形内容{
位置：绝对位置；
排名：0；
左：0；
底部：0；
右：0；
颜色：白色；
}
.广场内容分区{
显示：表格；
宽度：100%；
身高：100%；
}
.方形内容跨度{
显示：表格单元格；
文本对齐：居中；
垂直对齐：中间对齐；
颜色：白色；
}
诺赖特先生{
右边距：0！重要；
}
诺列夫特马金先生{
左边距：0！重要；
}
.行{
溢出：隐藏；
位置：相对位置；
}
.myLeftCol{
底部：0；
左侧填充：0！重要；
位置：绝对！重要；
排名：0；
}
米里格科尔先生{
左缘：41.6667%；
}