如何通過修改css和html來重複圖像

Question

我正在嘗試重複關於左側和右側容器的圖像.middle-container-line。

基本上，隨着插入更多的圖像，我希望.middle-container-line圖像重複y軸（向下）並跟隨插入的圖像。

所以我不想指定使用像素的高度，因爲我想要上傳圖像以確定線條重複多長時間。

這可能嗎？

這裏是我的代碼：http://jsfiddle.net/F9R4P/

CSS：

.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%; 
    height:100%; 
    border:1px solid green; 
    height:100%; 
    min-height:200px; 
    background: url("http://socialmediatalentincubator.com/chartego/img/live-feed/green-vertical.png") center repeat-y; 
} 
.right-container { 
    border:1px solid blue; 
    float:left; 
    width:39%; 
    height:100%; 
} 

Answer 1

您是否嘗試過使用

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

摘自：http://www.w3schools.com/cssref/pr_background-repeat.asp

Answer 2

只需從HTML除去中間的div完全地，將右側div浮動到th右鍵並將bg圖像放在容器上。

JSFiddle DEMO

HTML

<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="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> 
</div> 

CSS

.main-container { 
    width:600px; 
    overflow:hidden; 

    background: url("http://socialmediatalentincubator.com/chartego/img/live-feed/green-vertical.png") center repeat-y; 
} 

.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%; 
} 


.right-container { 
    border:1px solid blue; 
    float:right; 
    width:39%; 
    height:100%; 

} 

Answer 3

下面是使用表細胞做的一種方式：

.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; 
} 

見演示在：http://jsfiddle.net/audetwebdesign/6fhfG/

而不是使用花車，適用display: table你父容器（.main-container）， 然後display: table-cell至.left-container，.middle-container-line和.right-container。

由此產生的佈局將有3列都是相同的高度，並且整體高度將由左側或右側容器決定，具體取決於每個圖像的數量。

通過使用CSS表格，三列將始終保留在一行上，具體取決於您是否需要響應式設計而不是固定父容器的寬度。

注：應用text-align: center到.left-container和.right-container是你想要的圖像的每一列中水平居中。

Answer 4

實際上，你可以在整個代碼一起這樣的結合：

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

對CSS的參考背景，你可以有一個快速瀏覽一下在這裏： http://www.overpie.com/css/tutorials/css-background

Answer 5

您需要添加jQuery庫，找出最大高度。左側或右側的div將具有最大高度。

如果未添加，請在頁面中添加jQuery庫。 http://code.jquery.com/jquery-1.8.3.min.js

入住在這裏：http://jsfiddle.net/F9R4P/8/

<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%; 
}