我正在使用 CSS3 的多列布局功能，但无法找到一种方法来水平居中 div 以使文本环绕它。任何帮助都会很棒，谢谢!
最佳答案
我不太确定你想要什么，但这也许对你有帮助？这是fiddle
<!DOCTYPE html>
<html>
<head>
<style>
.newspaper {
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
-webkit-column-gap: 40px; /* Chrome, Safari, Opera */
-moz-column-gap: 40px; /* Firefox */
column-gap: 40px;
-webkit-column-rule-style: solid; /* Chrome, Safari, Opera */
-moz-column-rule-style: solid; /* Firefox */
column-rule-style: solid;
-webkit-column-rule-width: 1px; /* Chrome, Safari, Opera */
-moz-column-rule-width: 1px; /* Firefox */
column-rule-width: 1px;
}
.yourPic{
border:3px solid black;
height:60px;
margin-top:50%;
}
</style>
</head>
<body>
<p><b>Note:</b>Internet Explorer 9, and earlier versions, does not support the column-rule-width property.</p>
<div class="newspaper">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi
enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis
nisl ut aliquip ex ea commodo consequat.
<div class="yourPic">
picture
</div>
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et
accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis
eleifend option congue nihil imperdiet doming id quod mazim placerat facer
possim assum.
</div>
</body>
</html>
编辑 另一种实现这一点的可能性是使用表格。 (我更喜欢这个解决方案) 这里有一个例子 fiddle
关于html - 如何修复三列布局中间的div？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40663485/