動態寬度使用百分比

我從來沒有使用過百分比佈局。當然，我已經研究過它們，但沒有任何練習。所以，我要求大家看到我的佈局的截圖並告訴我：我怎樣才能以不同的百分比條件顯示相同的佈局，並且最終不會丟失任何佈局質量？我的意思是，沒有div的疊加和空格。動態寬度使用百分比

Screen resolution: 1920x1080

Screen resolution: 1024x768

正如你看到的，我的佈局「R確定。但是，在1024x768，我們有一個小間距。另一方面，在1920x1080，我們已經超過了層之間的空間。我正在使用CSS來做到這一點。看：

section#FeedDeck { 
    width: 100%; 
    height: 100%; 
    float: left; 
} 

.FeedContainer { 
    width: 100%; 
    float: left; 
    padding-bottom: 25px; 
    border-bottom: 1px solid #b9b9b9; 
} 

.LeftFeedSide { 
    width: 10%; 
    float: left; 
} 

.CenterFeedSide { 
    width: 80%; 
    float: left; 
} 

.RightFeedSide { 
    width: 10%; 
    float: right; 
    text-align: right; 
    font-size: 12px; 
} 

.RightFeedSide a { 
    width: 100%; 
    float: left; 
}

我的HTML：

<section id="FeedDeck"> 

      <div class="FeedContainer"> 

      <div class="LeftFeedSide"> 

       <img src="60x60.jpg" alt="" /> 

      </div> 

      <div class="CenterFeedSide"> 

       <header id="FeedContent"> 
        <h1>Anne Hathaway</h1> 
        <h4>Diretora de Design</h4> 
       </header> 
       <p> 
        Can you fix a broken drug company research lab? 
       </p> 
       <p> 
        Jack Scannell, the European pharmaceuticals analyst at 
        Sanford C. Bernstein, recently held a conference on the future 
        of drug research and development. On the last day, he had representatives 
        from two of the most successful drug development organizations on the planet: 
        Sean Bohen, who heads early resaerch and development at Genentech, part of Roche, 
        which has had a legendary string of cancer drug successes; and Mads Krogsgaard Thomsen, 
        the chief scientific officer at Novo Nordisk, one of the dominant players in diabetes and 
        the best-performing big pharma stock over the past decade. This story is based on a transcript 
        of their talks. 
       </p> 

      </div> 

      <div class="RightFeedSide"> 

       <a href="#">#1</a> 
       <span>há um minuto atrás</span> 

      </div> 

     </div> 

    </section>

來源

2012-07-04 Guilherme Oderdenge

請創建一個jsfiddle;這將使它更容易幫助。 –

你想要什麼_less spacing_或_more spacing_？我的意思是哪一個是正確的？ – Asif

@AaronDigulla：如你所願。等一下。 + Asif：我需要我的圖層之間有相同的間距。我可以用像素來做到這一點，但我無法使用它們。我想要的正確方式是1024x768像素分辨率。 –

有邊界的DIV容器：1px的固體紅;在你的形象上。我想它有80％的寬度或東西...嘗試給它一個max-width:1000px;藏漢

編輯

我想我誤會了！你用一些箭頭說明了問題，沒有看到！一時間爲你做一個好日子。

更新 - 這是

http://jsfiddle.net/uaJCU/2/

左邊欄有一個固定的寬度，剩下的就是百分比。

HTML

<div id="container"> 
    <div id="paddingFix"> 
     <div id="left"> 
     </div> 
     <div id="right"> 
     </div> 
    </div> 
</div>

CSS

#container { 
    width:90%; 
    margin:0 auto; 
    height:40px; 
} 
#paddingFix { 
    padding-left:80px; 
    position:relative; 
} 
#left { 
    position:absolute; 
    left:0px; 
    top:0px; 
    height:40px; 
    width:80px; 
    border:1px solid black; 
} 
#right { 
    height:40px; 
    border:1px solid blue; 
}

來源

2012-07-04 14:47:27 BjarkeCK

解決！我想到了幾種可能性，除非這樣。謝啦兄弟。 =） –

佈局是完美的工作，只有內容的大小變化的分辨率的變化。您不應該使用像素大小的元素（字體，圖片）。這樣內容將通過解決方案調整大小。

Check this question.

來源

2012-07-04 14:49:06 Matzi

這是很正常的白色空間，當你擴展到更大的決議;您需要了解一件事：

您爲列/佈局使用百分比的事實並不意味着所有元素都會自動變形：例如圖像。爲了獲得流暢的圖像，您需要最大寬度：100％「破解/修復」http://www.alistapart.com/articles/fluid-images/。這樣你的圖像會自動縮小，保持原來的比例/比例，並且會擴大到原來的大小。檢查http://www.gplus.gr/blog/ - 玩窗口大小，你會明白我的意思。

然後，沒有什麼能阻止你有一個半流體佈局：如果你認爲右列不應該改變寬度，那麼設置它的像素，或者設置一個最大寬度：200px（例如）這樣它會擴大到200px的限制。

來源

2012-07-04 14:49:46

動態寬度使用百分比

回答

相關問題