2

このテーマが、画面が小さくなると右下のアイテムが消えるという効果をどのように得るかを知りたいです。

http://themeforest.net/item/jr-photography-wordpress-theme/full_screen_preview/1163891?ref=takeaction

右下に項目がありますが、画面が小さすぎると、このように消えずに下に移動します。この効果を得る方法についてのコメントやリンクは素晴らしいでしょう! ありがとうございました。

4

1 に答える 1

3

メディアではなく CSS フローティング ソリューション

リンクしている特定のサイトのソースコードはチェックしていませんが、左側の要素のためにスペースがなくなったときに右側の要素を非表示にする単純な CSS ソリューションを作成しました。

ここに JSFiddle があります。2 つの要素がコンテナーの幅に対して広すぎるように、ウィンドウの幅のサイズを変更します (または、列をドラッグしてコンテンツ象限の幅のサイズを変更します)。権利コンテンツは自動的に消えます。

それは何をしますか？

左右にフロートする 2 つの追加コンテナーを持つフッター コンテナーがあります。3 つすべてが同じ高さを定義する必要があります。

  1. フッターはoverflow: hidden、可視ビューポートの下部を超えるものは表示されないように定義します。
  2. 他の2つは左右に浮かんでいます

その後、フローティングがすべてを処理します。フローティング要素を収容するのに十分なスペースがない場合、十分なスペースがある場所の下にレンダリングを開始します。ただし、コンテナ要素の高さには制限があるため、下に表示すると非表示になります。

<div class="footer container">
  <div class="left container">left content</div>
  <div class="right container">right content</div>
</div>

そしてシンプルな CSS (関連する設定のみを含む):

.container {
    height: 2em; /* all containers have the same height */
}

.footer {
    overflow: hidden;
}

.left {
    float:left;
}

.right {
    float: right;
}
​
于 2012-06-17T08:16:15.937 に答える