2

私は自分のコードを更新し、自分がやろうとしていることを説明するフィドルを作成しました。以前にも同様の質問がありましたが、テンプレートの流動性を反映していませんでした。

私は完全に流動的なレイアウトを持っており、別のの下にdivを表示する必要があります。

CSSでやりたいのですが、javascriptやjqueryは使いたくないです。

これがフィドルです：http： //jsfiddle.net/sexywebteacher/7hCNC/20/

私は多分不明確でした： 私はフィドルのセクション1とセクション2のdivについて話している

これができると思いますか？

ありがとうございました！

4

4 に答える 4

4

画像とテキストの両方の高さが可変である場合、純粋なCSSでは特に簡単ではありません。

可変の高さは、前の同様position: absoluteの質問に対する回答のように、に基づいてすべてを除外します。

1つのオプションは、ここに示されている手法を使用することです：http: //tanalin.com/en/articles/css-block-order/

display：table familyのプロパティを使用したCSSテーブル表示を使用して、HTMLページ上のブロックの垂直方向の順序を変更することができます。HTMLコードのブロック順序に関係なく、table-header-groupこのようなテーブルのヘッダー（）は上部に表示され、フッター（display: table-footer-group）は下部に表示され、テーブル本体（table-row-group）はヘッダーとフッターの間に表示されます。

これは、最近のすべてのブラウザーで機能します。注意が必要な場合は、IE8で機能します。IE6/7では動作しません。

この手法を使用したコードは次のとおりです。http：//jsfiddle.net/thirtydot/7hCNC/35/

私は本番Webサイトでこの手法を使用したことがないことを認めなければならないので、徹底的にテストしてください。

CSS3 2D変換をサポートするすべてのブラウザーで機能する別のアプローチは、コンテナー全体を垂直方向に反転してから、「画像」要素と「テキスト」要素に対して同じことを行うことです。CSS3変換をサポートしていないブラウザでも、すべてが機能しますが、「image」要素と「text」要素は元の順序になります。言い換えれば、それはうまく劣化します。を使用してIE6-8でこれを機能させることはおそらく可能ですが、それではfilterテキストがひどく見えるので、忘れてください。

この手法を使用したコードは次のとおりです。http：//jsfiddle.net/thirtydot/7hCNC/36/

これらのCSSメソッドのどれも十分ではない場合は、JavaScriptを使用する必要があります。

ただし、個人的にはHTMLで順序を切り替えることをお勧めします。グーグルがそれを気にかけているとは思えない。この場合、HTMLを「最適な順序」に保つために後ろ向きに曲げても、SEOに意味のある影響があるとは思えません。

于 2012-05-02T14:12:03.280 に答える
2

CSSのfloatingdiv "clearfix"クラスに追加します

.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

例：

<div class="column clearfix">
...
</div>
于 2012-05-02T13:22:30.683 に答える
0

幅を正確な幅に変更して（または最小幅として追加して）、自然に互いに下がるようにするか、単にクリアして互いに下に置くようにすることができます。

例えば

.clear {
  clear:both;
}

あなたのjsfiddle

于 2012-05-02T13:17:44.347 に答える
0

クリアの別の例を次に示します。クリア後​​の要素が常に一貫しているとは限らない場合にこれを使用するのが好きです。psuedo要素を使用して、clear属性を持つスペースを配置します。

.clear:after{
content:"."; 
line-height:0; 
height:0; 
display:block; 
clear:both; 
visibility:hidden;
}
于 2012-05-02T13:25:49.367 に答える