CSS堆棧圖像從右到左，出DIV

我正試圖在2個div中實現過去和未來的圖片行。屏幕左側的所有圖像從右到左堆疊到無窮遠，屏幕堆疊右側的所有圖像從左到右無窮大。我已經幾乎達到了這一點，除非我無法阻止圖像走向新的路線。CSS堆棧圖像從右到左，出DIV

HTML

<div id="parent1"> 
    <div id="past"> 
     <img id="topic1" src="./img/topic1.png"></img> 
     <img id="topic2" src="./img/topic2.png"></img> 
     ... 

    </div> 
    <div id="future"> 
     <img id="topic1a" src="./img/topic1a.png"></img> 
     <img id="topic2b" src="./img/topic2b.png"></img> 
     ... 

    </div> 
</div>

CSS

#parent { 
    position: absolute; 
    height: 100%; 
    width: 100%; 
    top: 0%; 
    left: 0% 
} 

#future { 
    position: absolute; 
    height: 100%; 
    width:50%; 
    left:50%; 
    top:0% 
} 

#future img { 
    float: left; 
    height: auto; 
    width: auto; 
    margin: 1%; 
    max-height: 100%; 
    white-space: nowrap; 
} 

#past { 
    position: absolute; 
    height: 100%; 
    width:50%; 
    left:0%; 
    top:0% 
} 

#past img { 
    float: right; 
    height: auto; 
    width: auto; 
    margin: 1%; 
    max-height: 100%; 
    white-space: nowrap; 
}

任何幫助將是巨大的。目前他們正在垂直堆疊到無限:(

來源

2013-07-09 Hepburn3D

這將是除了我用過NOWRAP。仍然沒有解決問題 – Hepburn3D

你可以添加一個[JSFiddle]（http://jsfiddle.net）來展示你的代碼嗎？你可能會擺脫浮動圖像顯示內聯塊，所以我不認爲他們需要 –

http://jsfiddle.net/XHacq/ 有史以來第一次小提琴，那很有趣 – Hepburn3D

根據您的說明ription的評論，你想的結構如下：

3 - 2 - [ 1 | 1 ] - 2 - 3

凡元素編號爲1可見，並且2 & 3是關閉屏幕，但仍然在線。 #present - -

您可以通過在右側帶有在div元素實現這一點使用左到右文本方向（默認西部的瀏覽器，但值得確定，如果你的佈局取決於它），並在股利左 - #future - 從右向左使用文本方向。然後，您可以隱藏使用overflow: hidden的父元素中溢出的元素：

CSS

img { 
    height: 100%; 
    width: 100%; 
} 

#past, #future { 
    position: absolute; 
    height: 100%; 
    width:50%; 
    left:0%; 
    top:0%; 
    overflow: hidden; 
    white-space: nowrap; 
} 

#past { 
    left:50%; 
    text-align: left; 
    direction: ltr; 
} 

#future { 
    text-align: right; 
    direction: rtl; 
}

HTML

<div id="past"> 
    <img id="topic1" src="/path/to/image1.jpg"></img> 
    <img id="topic2" src="/path/to/image2.jpg"></img> 
    <img id="topic3" src="/path/to/image3.jpg"></img> 
</div> 
<div id="future"> 
    <img id="topic1a" src="/path/to/image4.jpg"></img> 
    <img id="topic2b" src="/path/to/image5.jpg"></img> 
</div>

工作例如：http://jsfiddle.net/vymvN/

來源

2013-07-10 19:53:45

我從來沒有見過方向：rtl之前。那雖然完美。非常感謝你。你認爲你可以在頂部刪除「這個問題可能已經有答案了」嗎？我覺得這個問題以前沒有回答過。順便恭喜10.3 k代表。這非常令人印象深刻 – Hepburn3D

對，我得到的當前答案是float: right，並且使#past div根據其中有多少圖像動態改變寬度。非JavaScript的方式我會chuffed學習一下吧：d

CSS

#past { 
    right: 50%; 
    width: 300%; 
} 

#past img { 
    float: right; 
}

JQuery的

$('#past').css('width', ($('#past > img').size()) * 100 + "%");

來源

2013-07-10 07:54:44 Hepburn3D

CSS堆棧圖像從右到左，出DIV

回答

相關問題