3

ここにサンプルコード

<div id="field_one">
    <p>   ndustry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchange</p>

<div id="field_two">
    <ul>
        <li>one</li>
        <li>one</li>
        <li>one</li>
    </ul>
</div>
</div>

Css

div#field_one {
    width:400px; 
    height: 200px; 
    float: left;
}
div#field_two{ 
    float:right; 
    width:200px; 
    height: 100px;
    background: green
}

ブロック要素の周りにテキストをラップする必要があり、同じレベルで彼と一緒にいました。これが私が達成しようとしているjsfiddleのリンクですが、テキストはそのdiv要素をラップする必要があります

4

2 に答える 2

2

marginフロートされた要素に単にを置いて再配置することはできません。これでは、意図したとおりに機能しません。

代わりに、要素の順序を変更してください：http: //jsfiddle.net/h58Ra/26/

編集：

HTMLコード内の要素の順序を変更できない場合は、jQueryを使用して要素の順序を変更することを検討してください：http： //jsfiddle.net/h58Ra/30/

ここで行ったjQueryは、float要素を変数に保存し、古い位置から削除してから、親divの先頭に追加します。

var field_two = $("#field_two");
field_two.remove();
$("#field_one").prepend(field_two);

</ p>

于 2012-09-25T12:32:22.270 に答える
0

簡単な答え-div＃field2をPの前に置きます（そして負のトップマージンを取り除きます）

例えば

<div id="field_one">
  <div id="field_two">
    <ul>
      <li>one</li>
      <li>one</li>
      <li>one</li>
    </ul>
  </div>
  <p>   ndustry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchange</p>
</div>

セマンティックの観点からは良くありませんが、それを機能させる最も簡単な方法です。

編集：私が考えている間、jsfiddleのCSSも少し壊れていました（高さの値と2番目のfloatの間にセミコロン区切り文字がありません（これは必須ではありません）

于 2012-09-25T12:30:39.323 に答える