0

ブラウザウィンドウのサイズを変更すると、画像は（本来あるべきように）縮小しますが、div内で左に縮小します。収縮する方向を決定するものは何ですか？選択できますか？

例はここにあります：http：//cdpn.io/FdIKv （ページを縮小して表示）

オーバーラップ/オーバーラップする代わりにテキストを縮小する方法のボーナス。

ありがとう！

編集：お詫び、ここにコードがあります：

<style type="text/css">
#logo-div {
    max-width: 24%;
    width: 24%;
    height: auto;
    clear: both;
    z-index: 0;
    float: right;
    overflow: hidden;
}

#site-logo {
    max-width: 100%;
   display : block;
   margin : 0 auto;
    }


#site-title a {
    color: #CB2027;
    font-size: 2.7em;
    margin-right: auto;
    position: relative;
    overflow: hidden;
}

#site-title {
    margin-right: auto;
    width: 80%;
    position: relative;
    overflow: hidden;
}

#site-description {
    color: #000000;
    font-size: 2.340em;
    position: relative;
    overflow: hidden;
    width: 76%;

}

#branding hgroup {
    max-width: 60%;
float: left;
width: 60%;
}

</style>
<header id="branding" role="banner">
<!--<div id="logo-and-hgroup">-->
<div id="logo-div"><img id="site-logo" src="http://farm6.staticflickr.com/5016/5421726832_eb5c0e25fc_m.jpg" alt="" /> </div>
    <hgroup>

<h1 id="site-title">
<a href="http://google.com/" title="Thisisone ATest" rel="home">Thisisone ATest</a>
</h1>
                <h2 id="site-description">This is where the description will go</h2>



            </hgroup>
4

1 に答える 1

1

デフォルトでは、すべてが左上に向かって縮小します。上に向かって縮小するのは、ほとんどの人間の書記体系が上から下に向かって実行されるという事実によるものです。これは、受け入れられている普遍的な慣習です。左から右への方が論争があります—右から左へのデジタル書き込み形式（アラビア語など）が多数あり、CSS{direction: rtl}またはHTML属性で指定できますdir="rtl"。

したがって、デフォルトでは、すべてのコンテンツは左上から始まり、右に向かって伸び、利用できない場合は下の次の利用可能なスペースに戻ります。display: block要素（のような）は、デフォルトで、その要素divで使用可能な全幅を占めます。つまり、追加のCSSがない場合、次のコンテンツがその下に表示されます。

ただし、コード#logo-divでは、画像を含むが#site-logo必要であると指定しています。つまり、float: rightコンテナの右端（#branding説明したように、使用可能な全幅を占めるヘッダー）をハグします。デフォルトでは、浮動要素はその内容に合わせて幅を縮小しますが、幅もパーセンテージに設定されています。つまり、使用可能な幅に基づいて縮小または拡大します。

上下に移動することはできませんfloat—左右のみ—position: absoluteを定義するために使用できますbottom: 0。これにより、その下端が最も近い相対位置の祖先（この場合はビューポート）の下端と一致するようになります。ただし、floatを指定する場合と同様に、ブロックはその自然な全幅の下向きのシーケンス位置を無視します。絶対位置は、floatが無視されることを意味します（ただし、左右の値を設定することもできます）。

違いを探るためにこれらのプロパティのいくつかを適用して、デモを作成しました。

于 2013-03-04T19:42:14.910 に答える