动态宽度使用百分比

我从来没有使用过百分比布局。当然，我已经研究过它们，但没有任何练习。所以，我要求大家看到我的布局的截图并告诉我：我怎样才能以不同的百分比条件显示相同的布局，并且最终不会丢失任何布局质量？我的意思是，没有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

动态宽度使用百分比

回答

相关问题