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

您不能简单地将 amargin放在浮动元素上以重新定位它；这不会使它按您的意愿工作。

相反，更改元素的顺序：http: //jsfiddle.net/h58Ra/26/

编辑：

如果您无法更改 HTML 代码中元素的顺序，请考虑使用 jQuery 更改元素的顺序：http: //jsfiddle.net/h58Ra/30/

我在这里所做的 jQuery 将浮动元素保存在变量中，将其从旧位置删除，然后将其添加到父 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 也有点损坏（在高度值和第二个浮点数之间缺少分号分隔符（这不是必需的）

于 2012-09-25T12:30:39.323 回答