如何通过修改css和html使图像重复

我试着重复一张图片。中间的集装箱线与左右集装箱的关系

基本上，随着插入更多图像，我希望.middle容器行图像向下重复y轴，并跟随插入的图像

因此，我不想使用pixals指定高度，因为我希望上传图像来确定线下重复的长度

这可能吗

这是我的密码：

CSS:

.主货柜{ 宽度：600px； } .形象{ 高度：100px； 宽度：100px； 背景：黑色； 颜色：白色； 利润率：20px 0 0 20px； } .左货柜{ 高度：1000px； 边框：1px纯红； 浮动：左； 宽度：39%； } ·中班货柜船{ 浮动：左； 宽度：20%； 身高：100%； 边框：1px纯绿色； 身高：100%； 最小高度：200px； 背景：urlhttp://socialmediatalentincubator.com/chartego/img/live-feed/green-vertical.png 中心重复-y； } .右集装箱{ 边框：1px纯蓝色； 浮动：左； 宽度：39%； 身高：100%； } 你试过使用吗

.middle-container-line
{
background-image:url("http://socialmediatalentincubator.com/chartego/img/live-feed/green-vertical.png");
background-repeat:repeat-y;
} 

---

摘自：

只需从HTML中完全删除中间div，将右侧div向右浮动，然后将bg图像放在容器上

HTML

---

以下是使用表格单元格执行此操作的一种方法：

.main-container {
    width:600px;
    display: table;
}
.image {
    height:100px;
    width:100px;
    background:black;
    color:white;
    margin:20px 0 0 20px;
}
.left-container {
    display: table-cell;
    width:39%;
    border:1px solid red;
}
.middle-container-line {
    display: table-cell;
    width:20%;
    border:1px solid green;
    background: url("http://socialmediatalentincubator.com/chartego/img/live-feed/green-vertical.png") center repeat-y;
}
.right-container {
    display: table-cell;
    width:39%;
    border:1px solid blue;
}

请参见演示：

将display:table应用于父容器，而不是使用浮点数， 然后显示：表格单元格到.left容器、.middle容器行和.right容器

生成的布局将有3列，所有列的高度都相同，总体高度将由左侧或右侧容器决定，具体取决于每个容器中的图像数量

通过使用CSS表，三列将始终保持在一行上，这取决于您是否需要响应性设计，而不是固定父容器的宽度

---

注意：应用文本对齐：居中到.left容器和.right容器是您希望图像在每列中水平居中的位置。

您实际上可以这样组合整个代码：

.bgclass{
    background:url(images/mybg.jpg) repeat;
}

对于css参考背景，您可以在此处快速查看：

---

您需要添加Jquery库以查找最大高度。左侧或右侧div将具有最大高度

在页面中添加jQuery库（如果未添加）

请在此处查看：

})

---

没有让你的问题安静下来…你的小提琴似乎显示了你在追求什么，或者是关于如何使所有的柱子都具有相同高度的问题？是的，对不起，我试图在不使用指定高度的情况下使柱子具有相同的高度。我想上传的图像，以确定有多长的线是。。。这有意义吗？所以类的图像。中间的容器行应该基于左侧和右侧的任何一个类重复？jQuery对于这个布局来说有点过分，CSS就可以了。但是，它确实说明了另一种方法。在浮动子容器中，height:100%将没有效果，height:1000px并不是真正需要的。你的容器将根据添加到左/右子容器中的图像数量调整其高度。是的……我知道这一点，但除了显示问题的基本解决方案外，我不想弄乱现有CSS。

.main-container {
    width:600px;
    display: table;
}
.image {
    height:100px;
    width:100px;
    background:black;
    color:white;
    margin:20px 0 0 20px;
}
.left-container {
    display: table-cell;
    width:39%;
    border:1px solid red;
}
.middle-container-line {
    display: table-cell;
    width:20%;
    border:1px solid green;
    background: url("http://socialmediatalentincubator.com/chartego/img/live-feed/green-vertical.png") center repeat-y;
}
.right-container {
    display: table-cell;
    width:39%;
    border:1px solid blue;
}

.bgclass{
    background:url(images/mybg.jpg) repeat;
}

<div class="main-container">
<div class="left-container">
    <div class="image">this is image</div>
    <div class="image">this is image</div>
    <div class="image">this is image</div>
    <div class="image">this is image</div>
    <div class="image">this is image</div>
    <div class="image">this is image</div>
    <div class="image">this is image</div>
    <div class="image">this is image</div>
</div>
<div class="middle-container-line"></div>
<div class="right-container">
    <div class="image">this is image</div>
    <div class="image">this is image</div>
    <div class="image">this is image</div>
    <div class="image">this is image</div>
</div>

    jQuery(document).ready(function(){
      var leftHeight = $( ".left-container" ).height();
     var rightHeight = $( ".right-container" ).height();
    if(leftHeight>rightHeight)
      $(".middle-container-line").css('height',leftHeight);
    else
        $(".middle-container-line").css('height',rightHeight);

.main-container {
    width:600px;
}
.image {
    height:100px;
    width:100px;
    background:black;
    color:white;
    margin:20px 0 0 20px;
}
.left-container {
    height:1000px;
    border:1px solid red;
    float:left;
    width:39%;
}
.middle-container-line {
    float:left;
    width:20%;
    border:1px solid green;
    min-height:200px;
    background: url("http://socialmediatalentincubator.com/chartego/img/live-feed/green-vertical.png") center repeat-y;
    display:table-cell;
}
.right-container {
    border:1px solid blue;
    float:left;
    width:39%;
    height:100%;
}