css - css を使用して HTML 要素の順序を変更する

Question

次のものに特定の名前がある場合は、適切な調査を行うことができるように教えてください (これまでのところ、私の検索で出てきたのは、まったく異なるものである z インデックスを持つものでした)。

さて、次の状況を考えてみましょう。あなたが持っている：

<div class="foo">Foo</div>
<div class="bar">bar</div>

クラスが css シートで定義されていると仮定すると、別の css シートを追加するとクラスが変更されます。

フォント、色、bg などのプロパティについては、私には明らかです。

問題は、その位置をどのように変更するかです。次の出力が必要だと考えてください: (css のみを変更できます) 'Foo' を 2 番目に、'bar' を 1 番目にします。'foo' と 'bar' が 1 つの行になるようにします。

PS: これに特定の名前がある場合 (CSS スタイルで位置を変更する) 教えてください。

score 2 · Accepted Answer

css を使用してインデックスを変更することはできません。スタイルを設定するだけです。

お気に入り

.foo{ position: relative; top: 20px;}
.bar{ position: relative; top: -20px;}

次の例のようなラッパーを使用して、さらに多くのことができます。

score 1 · Accepted Answer

css を使用して div を配置するには、いくつかのオプションがあります。

positionその一つです。

より柔軟なソリューションとして、も使用できますfloat。

適切な割り当てで必要なものは何でもfloat:right;

左の割り当てで必要なものは何でもfloat:left;

デモ

score 0 · Accepted Answer

必要に応じて、位置 css 属性を上、左、下、右で操作してみてください。それらを水平方向に次々と配置したい場合は、 float:left を試すことができます

score 0 · Accepted Answer

はい、それを達成するには css フロートを使用する必要があります。

フロートは単に要素を指定された方向に押し出し、利用可能なスペースに従って積み上げます。

結果を得るには、これを適用する必要があります。

.foo, .bar { float: right; }

これらのタグが親要素にラップされていることを確認し、インラインブロックとして作成してください。そうしないと、完全なブロックの最後までフロートします。

このフィドルをチェックしてください http://jsfiddle.net/8hAmw/

4 に答える 4