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标签。

按几次Enter键创建一些行，pre标签保留html中的空格。您可以根据需要在预标记之间创建尽可能多的空格。

您可能希望缩小报价段落，使其不会与第二列重叠。

将魔术报价宽度更改为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中没有奇怪的＆＃34; hacks＆＃34;。我很欣赏史蒂夫哈特利的回答，他所说的肯定适用于静态网页。但是，我试图创建一个响应式页面，史蒂夫的代码会留下大的空白区域，窗口也会缩小。

为了让这个更具响应性，我要添加一个空的div，其中Steve放置了他的前元素。然后我会根据页面中其他元素的位置和大小来改变这个div的高度。

浮动不影响兄弟div的段落。

2 个答案: