定位在高度爲100％和寬度爲100％的部分內

如何正確定位「組合」部分，以便它不會落在「聯繫人」部分後面，並且根據「聯繫人」部分的大小進行伸展和縮小屏幕（就像照片背景）？它可以只用CSS和percantages完成嗎？我嘗試了許多不同的組合，但沒有成功。定位在高度爲100％和寬度爲100％的部分內

每個部分的高度始終爲100％。寬度也是如此。

http://jsfiddle.net/zwwve/9/

<section id="home" class="photobg"> 
     <div class="inner"> 
       <div class="copy"> 
        <h1>Home</h1> 
        <p>Some text here!</p> 
       </div> 
     </div> 
</section>

來源

2013-06-27 C. Felipe

這是一個粗略的想法：http://jsfiddle.net/derekstory/zwwve/17/

對於取消隱藏的部分業務，把一個div包裹在其周圍。沒有需要包裝的CSS。

對於縮放，您將希望刪除圖庫寬度。也許放一個最小寬度。

.gallery { 
    min-width: 500px; 
    margin-left: auto; 
    margin-right: auto; 
}

對於投資組合，您還可以給他們一個百分比和一個最小寬度。

.project { 
    display: inline; 
    float: left; 
    height: auto; 
    position: relative; 
    width: 20%; 
    min-width: 120px; 
    margin-top: 40px; 
    margin-left: 40px; 
    margin-right: 20px; 
}

它粗糙但基本的想法。

來源

2013-06-27 16:03:22

謝謝。這是一個縮放的過程，但我的投資組合部分仍然落後於聯繫人部分。這使我瘋狂：（ –

http://jsfiddle.net/derekstory/zwwve/17/你可能想減小投資組合項目的大小。也許給他們一個最小和最大的寬度。 –

我看到你添加了最小a max寬度可以提高這個數量是否可以向#pagetwo的高度和寬度添加一個百分比值？灰色框架可以比投資組合部分的白色容器更小，只要灰色框架粘在投資組合的白色內部就可以了 –

您對.gallery類的固定寬度已更改爲100％，現在這些項目隨着屏幕尺寸的減小而下降。

我也改變了聯繫div的位置和底部，所以它可以在底部。

JSFIDDLE

添加/更改CSS：

.gallery { 
    width: 100%; 
    margin-left: auto; 
    margin-right: auto; 
} 

#contact{ 
    position: relative; 
    top: 1000px; 
}

來源

2013-06-27 16:25:12 designtocode

感謝您參與此處。我檢查了你的小提琴，但是現在投資組合部分太大了，當我拉伸或縮小它時，它並不遵循瀏覽器的大小（例如它與主頁的比如： –

定位在高度爲100％和寬度爲100％的部分內

回答

相關問題