将三个图像并排排列在一个div中，一次显示一个图像并隐藏两个图像

这是我的要求。我有三个图像应该并排排列。当我减少剩余边距时，所有三张图像都应该逐个隐藏在队列中。将三个图像并排排列在一个div中，一次显示一个图像并隐藏两个图像

enter image description here 这里来了我的实际问题。当我增加剩余边距时，所有图像都应该到队列中的右侧隐藏部分。但对我而言，他们正在走下坡路。

我的HTML，

<div class="content"> 
    <div class="images"> 
     <img id="left-img" src="img/trees.png"> 
     <img id="center-img" src="img/buildings.png"> 
     <img id="right-img" src="img/interior.png"> 
    </div> 
</div>

我的CSS，

.content 
{ 
    width : 100%; 
    overflow : hidden; 
} 
.images 
{ 
    width : 80%; 
    margin-left : auto; 
    margin-right : auto; 
    height : 550px; 
    overflow : hidden; 
} 
.images-slider img 
{ 
    width: 60%; 
    display : inline-block; 
    float : left; 
}

，然后当我降低利润率左到最左侧的图像，所有的图像应该是这样的排列。

enter image description here

同样，当我提高保证金离开了，所有的图像应该向右走这样的（这是不会发生）。

enter image description here

相反所有的图像都下降到div当我离开增加保证金。我用position : inline;,position : inline-block;,float: left;。但是没有任何东西能为我工作。我在哪里错了？请帮帮我。

来源

2015-01-26 raghuveer999

'位置'不接受'inline'或'inline-block'的值 - 'display' does ... Us e'white-space：pre'在容器元素上，以便图像不会分成几行，但保持彼此相邻。 – CBroe 2015-01-26 19:57:38

如果我理解正确的话，你可以在方式实现这一目标如下：

section.images { 
 
    width: 100px; 
 
    height: 100px; 
 
    overflow: hidden; 
 
} 
 

 
section.images figure { 
 
    display: flex; 
 
} 
 

 
section.images figure img { 
 
    flex: 1 0 auto; 
 
} 
 

 
/* Update the left property to change which img is shown */ 
 
section.images figure { 
 
    position: relative; 
 
    left: -100px; 
 
} 
 

 

 

 

 
/* --------------------------------- 
 
    Demo use only 
 
--------------------------------- */ 
 

 
* { margin:0; padding:0 } 
 

 
img { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: red; 
 
} 
 

 
img:nth-child(1) { background:gold } 
 
img:nth-child(2) { background:dodgerblue } 
 
img:nth-child(3) { background:orangered }

<section class="images"> 
 
    <figure> 
 
    <img src="img/trees.png"> 
 
    <img src="img/buildings.png"> 
 
    <img src="img/interior.png"> 
 
    <figure> 
 
</section>

Edittable演示：http://jsbin.com/fiwajoxixi

来源

2015-01-26 19:59:14 Zaqx

是的。非常感谢。我看到你的演示。这就是我想要的。我需要解决它。如果我有任何疑问，我会问你。再一次感谢你。 – raghuveer999 2015-01-27 03:10:36

我会建议在其中注入一些jQuery以使其更容易。

我强烈建议Unslider http://unslider.com

来源

2015-01-26 19:24:16

将三个图像并排排列在一个div中，一次显示一个图像并隐藏两个图像

回答

相关问题