將三個圖像並排排列在一個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中，一次顯示一個圖像並隱藏兩個圖像

回答

相關問題