浮动不影响同级 div 的段落。

Question

我正在尝试创建一个包含三列文本的网页，但这些列围绕着一个中心引号浮动。它应该看起来像这样： http://imgur.com/Rkh04OU

问题是，应用于引用的 "float:left" 不会影响文本，因为文本包含 div。我无法从 div 中取出文本，因为这样它就不会在 3 列中。有什么我不知道的技巧可以解决这个问题吗？

如果有帮助，这是我的代码：

#magicquote{
 position: absolute;
    top: 10vh;
    width: 50%;
 float: left;
}

#maintext{
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
    margin-left: 25%;
}

<!DOCTYPE html>
<html lang="en-US">
 <head>
        <link rel = "stylesheet" href = "teststylesheet.css" type = "text/css" media = "all"/>
    </head>
    <body>
  <p id = "magicquote"> lorem</p>
  <div id = "maintext">
   <p> lorem</p>
   <p> lorem</p>
  </div>
    </body>
</html>

Answer 1

您可以在正文 div 和第一段之间添加前置标签。

按几次回车键创建一些行，pre 标签在 html 中保留白色 space。您可以根据需要在前置标签之间创建任意多的白色space。

您可能希望缩小引用段落的范围，以免它与第二列重叠。

这就是我将魔术引号宽度更改为 40% 后的样子 http://imgur.com/BBvvQ2L

<!DOCTYPE html>
<html lang="en-US">
    <head>
        <link rel = "stylesheet" href = "teststylesheet.css" type = "text/css" media = "all"/>
    </head>
    <body>
        <p id = "magicquote"> lorem</p>
        <div id = "maintext">
            <pre>




            </pre>
            <p> lorem</p>
            <p> lorem</p>
        </div>
    </body>
</html>

Answer 2

如果我错了有人纠正我，但我不认为我想做的事情在当前 (2016) CSS 没有奇怪的情况下是可能的 "hacks"。我很欣赏 Steve Hartley 的回答，他所说的肯定适用于静态网页。但是，我正在尝试制作一个响应式页面，而史蒂夫的代码会留下大量空白，并且 window 会缩小。

为了提高响应速度，我将在 Steve 放置他的 pre 元素的地方添加一个空的 div。然后，我将使用 JS 根据页面中其他元素的位置和大小更改此 div 的高度。

浮动不影响同级 div 的段落。

Float not affecting sibling div's paragraphs.

css

css-float

web