Question

这里是示例代码

<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元素

Answer 1

你不能简单地在浮动元素上放置margin来重新定位它;这不会让你按照预期工作。

相反，更改元素的顺序： 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);

Answer 2

简单的答案 - 将你的div＃field2放在P之前（并摆脱负的上边距）

e.g。

<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 个答案: