5

これに対する簡単な解決策である必要があります：

私は次の順序でdivを持っています：

<div id="middle"></div>
<div id="right"></div>
<div id="left"></div>

私はそれらをこの順序で持っている必要があります。"middle"floatを使用して、最初のdiv（ ）を2番目のdivの間に入れるにはどうすればよいですか。

各divには、設定された高さと設定された幅（ピクセル単位）があります。

私はfloat:left;真ん中でやってみました：

[[中央]右][左]

次にfloat:right;、最上位のクラスターで：

[左[[中央]右]]]

しかし、それはとして表示されます

[中央][左][右]

何か助けはありますか？

編集：これは現在のソースです：

http://pastebin.com/sjiw9PLn

http://pastebin.com/NMsWk1nZ

4

5 に答える 5

7

あなたはこのように書くことができます：

div{
display:inline-block;
}
#left{
 float:left;
}
#right{
 float:right;
}

これをチェックしてくださいhttp://jsfiddle.net/8amez/

于 2012-04-17T09:18:00.437 に答える
1

実際、ラッパーのdiv要素を追加できる場合、これはJS Fiddleで機能します（簡単な例としてはinsofar） 。

​#left {
    float: left;
}

​#wrap {
    width: 80%;
    float: right;
}

​#wrap #middle {
    float: left;
}

#wrap #right {
    float: right;
}​

次のHTMLが与えられます：

<div id="wrap">
    <div id="middle">middle</div>
    <div id="right">right</div>
</div>
<div id="left">left</div>​​​​​​​​​​​​​​​​​​

ただし、これはかなり壊れやすい可能性があることに注意してください。マークアップを並べ替えるか、サーバー側またはHTMLで変更できない場合は、JavaScriptを使用して物事を移動することで、より適切に実現できます。たとえば、次のようになります。

var middle = document.getElementById('middle'),
    left = document.getElementById('left');

middle.parentNode.insertBefore(middle,left.nextSibling);​

JSフィドルデモ。

于 2012-04-17T09:22:30.257 に答える
0

幅と高さが設定されている場合は、css属性を使用します。

position:absolute;

と遊ぶ：

left: 100px; /* width of the div on the left */
于 2012-04-17T09:18:47.067 に答える
0

楽しみのためにずっと後：text-align-centerプロパティ（真ん中のdivのみ）を持つ以外の3つのdivをすべて横に並べ、答えどおりに左右のdivをフロートさせます。

.group{
   text-align:center;
}

#left{
 display:inline-block;
   float:left;
}

#right{
   display:inline-block;
   float:right;
}

#middle{
 display:inline-block;

}
<div class="group">
  <div id="left">[left]</div>
  <div id="middle">[middle]</div>
  <div id="right">[right]</div>
</div>

于 2018-07-20T10:50:54.090 に答える
-1

このようなコードに依存してコードを取得するスクレイピングツールがこの順序であると仮定すると、ページが読み込まれた後にJavaScriptを追加してシャッフルしてみませんか。

于 2012-04-17T09:28:24.260 に答える