6

假设我有这个 HTML：

<div id="a">
  a aa aaa a aa aaa a aa aaa a aa aaa a aa aaa a aa aaa a aa aaa
  a aa aaa a aa aaa a aa aaa a aa aaa a aa aaa a aa aaa a aa aaa
  a aa aaa a aa aaa a aa aaa a aa aaa a aa aaa a aa aaa a aa aaa
</div>
<div id="b">
  b bb bbb b bb bbb b bb bbb b bb bbb b bb bbb b bb bbb
</div>

使用 CSS，我如何将 div A 包裹在 div B 周围，以便获得如下效果？

包装文本 div

从我尝试过的所有内容和阅读过的所有内容来看，我什至不确定这样的事情是否可行。具有负边距的浮动只是重叠而不是换行，任何绝对定位的尝试都会将 div B 从流中取出，因此也不会在那里换行。

我希望 div A 跟随 div B 作为兄弟，以便内容仅显示在手机或屏幕阅读器上。这就是为什么 div B 不是 div A 的孩子。

不诉诸于用 JavaScript 移动 div B，有没有什么 CSS 小手可以达到效果。我唯一能想到的就是在 div A 中放置一个节省空间的空 div，然后将 div B 重新定位到它的“顶部”。这是一种有效的技术，还是我只是在不同大小的浏览器视口上找麻烦？

4

3 回答 3

1

每个人似乎都同意这种事情不能单独使用 CSS 完成。因此，我使用 jQuery 编写了一个简短的（人为的）解决方案，以防它对任何人都有帮助。您还可以在http://jsfiddle.net/qadJB/查看结果 

<!DOCTYPE html>
<html>
  <body>
    <div id="a">
      a aa aaa a aa aaa a aa aaa a aa aaa a aa aaa a aa aaa a aa aaa
      <div id="b-box"></div>
      a aa aaa a aa aaa a aa aaa a aa aaa a aa aaa a aa aaa a aa aaa
      a aa aaa a aa aaa a aa aaa a aa aaa a aa aaa a aa aaa a aa aaa
    </div>
    <div id="b">
      b bb bbb b bb bbb b bb bbb b bb bbb b bb bbb b bb bbb
    </div>
    <style>
      div { font-family: consolas; }
      #a { margin-left: 5em; width: 18em; }
      #b-box { border: 1px solid #eee; float: left; height: 3.25em; width: 10em; margin: 0.5em; margin-left: -4em; }
    </style>
    <script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
    <script>
      $(function() {
        var boxPos = $('#b-box').offset();

        $('#b')
          .css('position', 'absolute')
          .width($('#b-box').width())
          .css('top', boxPos.top + 'px')
          .css('left', boxPos.left + 'px');
      });
    </script>
  </body>
</html>

编辑：为了简单起见，我省略了隐藏 div Box-B 的代码，而不是为小屏幕移动 div B。我会使用 CSS 媒体查询来隐藏 div B-Box，当它被隐藏时，jQuery 代码不会对 div B 做任何事情。

于 2013-04-12T17:08:43.243 回答
1

要回答你的问题，这可以用css来完成吗，答案是否定的。但是你绝对可以使用 jQuery 和 css 来做到这一点。jQuery 会处理不同的视口大小等。

于 2013-04-11T20:34:27.750 回答
0

就像您提到的那样，为“b”创建一个框，以便“a”可以用浮动环绕。

于 2013-04-11T20:05:22.630 回答