Question

我从未使用百分比布局。当然，我已经研究过它们，但没有任何练习。所以，我请大家看看我的布局截图并告诉我：如何在不同的百分比条件下显示相同的布局，最后，不丢失任何布局质量？我的意思是，没有div的叠加和空格。

Screen resolution: 1920x1080

Screen resolution: 1024x768

如你所见，我的布局'好吧。但是，在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>

Answer 1

具有边框的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; }

Answer 2

布局完美有效，只有内容大小随着分辨率的变化而变化。您不应使用像素大小的元素（字体，图片）。这样，内容将以分辨率调整大小。

Check this question.

Answer 3

当你扩展到更大的分辨率时，有白色空间是正常的;你需要了解一件事：

您使用列/布局的百分比这一事实并不意味着所有元素都会自动流动：例如图像。为了获得流畅的图像，您需要max-width：100％“hack / fix”http://www.alistapart.com/articles/fluid-images/。这样，您的图像将自动缩小，保持原始比率/比例，并将扩展到原始大小。检查http://www.gplus.gr/blog/ - 玩窗口大小，你就会明白我的意思。

然后，没有什么能阻止您进行半流体布局：如果您认为右列不应更改宽度，则将其设置为像素，或者设置最大宽度：200px（例如），它会扩展到200px的限制。

动态宽度使用百分比

3 个答案: