並排放置兩個100％寬度的div

因此，如果我想要有兩個div，每個100％的整個頁面並排放置，因爲包裝器具有overflow:hidden，我該如何去實現它？並排放置兩個100％寬度的div

我試過使用inline-block但它沒有工作。

我試過使用float太但它造成了錯誤。

我想隱藏第二個div，這樣我就可以將它改爲動畫，就像幻燈片一樣。

在此先感謝！

來源

2013-09-23 ihsoy ih

所以，你希望自己的網頁有200％的寬度？ – Schleis

從包裝中刪除'overflow：hidden'，或者確保其寬度爲200％。 –

是這樣嗎？我想要隱藏第二個div，這樣我就可以將其作爲動畫改成「left」，就像幻燈片一樣。 –

這應該純粹是使用絕對定位和使用懸停狀態或JavaScript過渡左側屬性的頁面之一定位其中一個div。

懸停紅色的div。

Codepen Example

來源

2013-09-23 15:16:26

也感謝Olly，但是這個有一個更好的例子。無論如何，謝謝你們兩位！ –

[JS小提琴版]（http：// jsfiddle。net/w6qqW/1 /） –

@Paulie_D對不起再次打擾你，但有沒有辦法使內容相對而不是絕對？現在整個容器崩潰了。 –

你不能設置最大寬度爲100％，沒有設置實際寬度並將它們並排放置？有了overflow：hidden，當它們展開時，它應該創建水平滾動條。

來源

2013-09-23 15:03:41 KnowHowSolutions

這是詢問OP想要什麼，因此比回答更適合評論。 –

對不起，我編輯了我的問題。我不想滾動條，它應該完全隱藏起來。 –

你是正確的，應該是一個評論，直到我提交後才知道。 – KnowHowSolutions

如果我正確地理解了你，你可以使用inline-block後實現你的目標。你只需要小心一點空白（即你需要確保你的兩個子元素之間沒有空白）。我已經通過設置white-space: nowrap;來阻止div的包裝。

<div class="foo"> 
    <div> woo woo !</div><div> woo woo !</div> 
</div> 

.foo { 
    overflow: hidden; 
    white-space: nowrap;   
} 
    .foo > div { 
     display: inline-block; 
     vertical-align: top; 
     width: 100%; 
     background: aqua; 
    } 
    .foo > div + div { 
     background: lime; 
    }

試試看http://jsfiddle.net/8Q3pS/2/。

編輯：以下是使用position: absolute;：http://jsfiddle.net/8Q3pS/5/的替代實施方案。這樣，您就可以使用left將第二個動畫製作爲視圖。請注意，您需要在父級div上設置高度。

.foo { 
    position: relative; 
    width: 100%; 
    height: 1.5em; 
    overflow: hidden; 
} 
    .foo > div { 
     position: absolute; 
     top: 0; 
     left: 0; 
     width: 100%; 
     background: aqua; 
    } 
    .foo > div + div { 
     left: 100%; 
     background: lime; 
    }

來源

2013-09-23 15:14:37

容器是否需要「位置：相對」？ –

不在第一個例子中 - 我會編輯。對於第二個示例，容器需要定位，以便子元素相對於它定位。 –

並排放置兩個100％寬度的div

回答

相關問題