UWP：如何呈现多列 WebView 而不是垂直滚动条答案

【问题标题】：UWP: How to render Multi Column WebView instead of having vertical scroll barUWP：如何呈现多列 WebView 而不是垂直滚动条
【发布时间】：2017-08-17 00:04:19
【问题描述】：

我想将它移到下一列，而不是滚动条，是否可以使用 WebView 控件？

见下图：

带有“红框”的内容我想移到第二列。

XAML 代码：

<Grid>
<Grid.RowDefinitions>
    <RowDefinition Height="Auto" />
    <RowDefinition Height="500" />
</Grid.RowDefinitions>

<Grid Grid.Row="0" />
<WebView Grid.Row="1" Width="410" local:WebViewProperties.HtmlString="{Binding Description}"></WebView>

【问题讨论】：

标签： css xaml webview uwp

【解决方案1】：

如何呈现多列 WebView 而不是垂直滚动条

WebView 无法将您的 HTML 内容呈现为多列。这也不应该由WebView 控件完成。您应该能够通过 CSS 样式将 HTML 内容设置为多列。例如，下面的newspaper div 显示为两列。

<!DOCTYPE html>
<html>
<head>
    <style>
        .newspaper {
            -webkit-column-count: 2; /* Chrome, Safari, Opera */
            -moz-column-count: 2; /* Firefox */
            column-count: 2; 
        }
    </style>
</head>
<body>
    <p><b>Note:</b> Internet Explorer 9, and earlier versions, does not support the column-count 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. 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>

更多详情请参考CSS3 Multiple Columns。通过 HTML 元素或 CSS 样式将 HTML 布局更新为您想要的，然后渲染它们。

【讨论】：