3

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

屏幕分辨率：1920x1080

屏幕分辨率：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>
4

3 回答 3

2

具有边框的 div 容器：1px 纯红色；在你的形象上。我想它有 80% 的宽度或其他东西......试着给它一个max-width:1000px;好

编辑

我想我误会了！您用一些箭头说明了问题，没有看到！片刻，为您制作一个 jsfiddle。

更新 - 在这里

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-04T14:47:27.627 回答
0

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

检查这个问题。

于 2012-07-04T14:49:06.520 回答
0

当您扩展到更大的分辨率时，有空白是正常的；你需要明白一件事：

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

然后，没有什么能阻止你拥有一个半流体布局：如果你认为右列不应该改变宽度，那么以像素为单位设置它，或者在它上面设置一个 max-width:200px （例如），这样它会展开直到 200 像素的限制。

于 2012-07-04T14:49:46.023 回答