Question

我有<ul>强制文字环绕<li>内的图片。什么是格式化这种格式的最佳方式，所以我可以添加尽可能多的文本，因为我没有任何文本换行？我无法解决这个问题。

<div id="services_banner"><strong>The Amazing Benefits You Get When You Use Advanced Litho</strong></div>
             <span> <img src="../Img/Edits/banner_edge.png"> </span>    
                <div id="our_services">
                     <ul>

                    <li>
                      <img src="http://www.grifolsorderdesk.com/wp-content/uploads/2015/12/personal_services_icon.png" />
                      <h3>Personal Service</h3>
                      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                         </p>
                    </li>
                    <li>
                      <img src="http://www.grifolsorderdesk.com/wp-content/uploads/2015/12/online_quote_icon.png" />
                      <h3>Online Instant Quotes</h3>
                      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
                      </p>
                    </li>
                    <li>
                      <img src="http://www.grifolsorderdesk.com/wp-content/uploads/2015/12/convenience_icon_2.png" />
                      <h3>Convenience You Can't Beat</h3>
                      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
                      </p>
                    </li>
                    <li>
                      <img src="http://www.grifolsorderdesk.com/wp-content/uploads/2015/12/shipping_icon.png" />
                      <span><h3>Fast & Reliable Shipping</h3>
                      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
                      </p></span>
                    </li>

                    </ul>
                </div>

                <div id="contact_support">

                    <img src="http://www.grifolsorderdesk.com/wp-content/uploads/2015/12/tech_support.png">
                    <div id="call_box">
                    <p><strong>Call (949) 215-9060</strong><br> to talk to one of our printing experts.</p>
                    </div>
                </div>

这是我的Demo

Answer 1

如果我理解你的问题，那么你会想要这样的事情

https://jsfiddle.net/3keL0znm/5/

我已将内容放入DIV标记内，并将DIV代码的显示更改为table-cell

Answer 2

这些图像确实应该是背景图像，在这种情况下，您可以将它们放在左侧，然后在import scala.collection.mutable.{Map, ListBuffer} object Main { def main(args : Array[String]) = { val m : Map[String, ListBuffer[Double]] = Map() val labels = Array("1","2","3","4","5","6") val points = Array.fill(600000){0.0} var it = 0 val t1 = System.currentTimeMillis for (i <- 0 until points.length) { if(it == labels.length-1) it = 0 val point = points(i) val currentLabel = labels(it) val values = m.getOrElse(currentLabel, ListBuffer()) m += (currentLabel -> (values :+ point)) it += 1 println("it -> = " + it) } val t2 = System.currentTimeMillis println("fill values in = " + (t2-t1) + " msecs") } }上添加填充左侧，这样文本就可以完全清除图像。

我在这里玩过：https://jsfiddle.net/3keL0znm/7/

CSS - 在图像上的无序列表中停止文本换行

2 个答案: