Layout mit CSS für folgendes Design erstellen

Question

Wir versuchen, das folgende Layout basierend auf dynamischen html Zeichenfolge zu erreichen.

Hier sind wir konfrontiert, wenn es zweite Seite Inhalt Layout nicht geht & können wir nicht Bilder auf der ersten Seite hinzufügen.

Der Beispielcode, wie unten in nativen Code versucht:

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) 

    } 

Wie kann ich diese Html5 mit CSS zu tun, dass die horizontale Scrollen sein sollte?

Wir haben mit Kerntext in iOs versucht, aber wir haben Langsamkeit gegenüber issue.So wir mit UIWebView beschlossen zu gehen?

Wir haben dies mit CoreText Rahmen, nur Problem mit diesem Layout ist Langsamkeit, wenn sein Inhalt sehr sehr groß.Wir überprüften viele Wege, aber kein Glück? Wir sind nicht in der Lage, Langsamkeit zu beheben, Hilfe würde geschätzt werden, ich werde Probe auch teilen, wenn irgendjemand interessiert ist, um beizutragen.

Answer 1

Vielleicht sollte dies ein Kommentar sein, aber es ist ein bisschen lang, stattdessen lasse ich eine Antwort, um zu erklären, warum ich diese Frage ablehne: es ist eine Bitte um jemanden, der freie Arbeit macht. Sie bieten keine wirklich spezifischen Informationen über Lösungen, die Sie ausprobiert haben und wie sie versagt haben. Stattdessen stellen Sie die sehr weit gefasste Frage "Ist es möglich, dieses Layout zu implementieren, können Sie es für mich tun?" Die Antwort auf diese Frage lautet normalerweise: "Ja, aber es gibt viele Möglichkeiten, dies zu tun, und wenn wir eine Konversation führen würden, um das Problem zu lösen, würde ich es vorziehen, Sie zu belasten." Es gibt eine Reihe von separaten Problemen, die Ihr Problem ausmachen, und das Layout ist nur eines davon.

Ich bin sicher, dass es keine böse Absicht gibt. Ich hoffe, dass Sie das Problem lösen können! Aber Sie sollten auch diese Anleitung lesen und entweder lernen, die HTML/CSS/JS erforderlich, um das Problem zu lösen oder einen Entwickler, der das Know-how hat.

Wenn Sie es in HTML/CSS selbst angehen, würde ich empfehlen, mit overflow-x: scroll; auf dem Container zu beginnen, der Ihren Inhalt enthält, und diese Informationen über CSS-Spalten https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts betrachten, aber mit einem Vorbehalt, dass Spalten aren Es wird von allen Browsern einheitlich unterstützt, daher ist es ratsam, sie zu vermeiden oder sie anders zu implementieren.