0

我正在尝试重复.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%;
}
4

5 回答 5

2

您实际上可以像这样将整个代码组合在一起：

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

对于 css 参考背景，您可以在这里快速查看： http ://www.overpie.com/css/tutorials/css-background

于 2013-10-11T11:08:51.970 回答
2

您需要添加 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%;
}
于 2013-10-11T11:10:15.800 回答
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

于 2013-10-11T10:53:46.127 回答
1

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

JSFiddle 演示

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

}
于 2013-10-11T11:03:58.230 回答
1

这是使用表格单元格的一种方法：

.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

于 2013-10-11T11:05:07.880 回答