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

border：1pxの赤一色のdivコンテナ。あなたのイメージに。私はそれが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％の「ハック/修正」http://www.alistapart.com/articles/fluid-images/が必要です。このようにして、画像は自動的に縮小され、元の比率/比率が維持され、元のサイズまで拡大されます。http://www.gplus.gr/blog/を確認してください-ウィンドウサイズを試してみてください。そうすれば、私が何を意味するのかがわかります。

次に、半流動的なレイアウトにすることを妨げるものは何もありません。右の列の幅を変更しないと思われる場合は、ピクセル単位で設定するか、max-width：200px（たとえば）を設定します。 200ピクセルの制限まで展開します。

于 2012-07-04T14:49:46.023 に答える