使用 CSS 创建布局以进行以下设计答案

【问题标题】：create layout using CSS for following design使用 CSS 创建布局以进行以下设计
【发布时间】：2017-08-13 04:48:57
【问题描述】：

我们正在尝试基于动态html字符串实现如下布局。

这里我们面临的是第二页内容布局不上，我们无法在第一页添加图像。

在本机代码中尝试的示例代码如下：

 func setData(){

        let dic = arrayData[currentIndex]
        url = dic["ImageLink"] as! String
        self.url = self.url + "_MEDVPF.gif"
        content = dic["ArticleXML"] as! String

        let height = String(describing:webViewObj.frame.size.height - 100) + "px"
        let width = String(describing: self.view.frame.size.width / 3 - 20) + "px"

//        let style = "<div style=color:#0000FF>" + String(describing: dic["HeadLine"]!) + "<br /><br />" +  String(describing: dic["Abstract"]!) + "</div>"

        self.headlineLabel.text = dic["HeadLine"] as? String
        self.abstractLabel.text =  dic["Abstract"] as? String
        var styleCSS = "font-family: TAUN_Elango_Abirami; font-size: 18px; column-width: %@; column-gap: 10px; height:%@;>"
        styleCSS = String(format:styleCSS,width,height)

        let bodyStyle = "<div style= \"%@\""  + content + "</div>"
        let bodyStyleConten = String(format:bodyStyle,styleCSS)



        let htmlString =   String(format:bodyStyleConten)
        let finalDiv = "<div>" + htmlString + "</div>"
        webViewObj.loadHTMLString(finalDiv, baseURL: nil)

    }

我怎样才能用 CSS 做这个 Html5，应该是水平滚动？

我们已经尝试在 iOs 中使用 core text，但是遇到了速度慢的问题。所以我们决定使用 uiwebview？

我们用 CoreText 框架来做这个，这个布局的唯一问题是当它的内容非常大时速度很慢。我们检查了很多方法，但没有运气？我们无法解决缓慢问题，我们将不胜感激，如果有人有兴趣贡献，我也会分享示例。

【问题讨论】：

哇，这很罕见！ ;)
@nashcheez 谢谢，还有其他建议吗？
这种新闻应用

标签： html ios swift css

【解决方案1】：

也许这应该是一个评论，但它有点长，所以我留下一个答案来解释我为什么不赞成这个问题：这是一个要求某人做免费工作的请求。您没有提供有关您尝试过的解决方案以及它们如何失败的任何真正具体的信息，而是提出了一个非常广泛的问题：“是否有可能实现此布局，您能为我做吗？”这个问题的答案通常是，“是的，但是有很多方法可以做到，如果我们要进行对话来解决问题，我宁愿向你收费。”有许多单独的问题构成了您的问题，布局只是其中之一。

我确定没有恶意。真希望你能解决问题！但是您也应该阅读本指南https://stackoverflow.com/help/how-to-ask 并学习解决问题所需的 HTML/CSS/JS 或与具有专业知识的开发人员签约。

如果您打算自己在 HTML/CSS 中解决它，我建议您在包含您的内容的容器上从 overflow-x: scroll; 开始，并查看有关 CSS 列 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts 的此信息，但需要注意的是列在浏览器中的支持并不统一，因此最好避免使用它们或以不同的方式实现它们。

【讨论】：