订单列表的浮动图像和文本换行

Posted 2023-03-06

技术标签:

【中文标题】订单列表的浮动图像和文本换行【英文标题】：Floating image and text wrap for order list 【发布时间】：2020-11-04 11:43:25 【问题描述】：

有什么方法可以让 IE11 中的子弹看起来正常，带有浮动图像和文本换行？

下面是 chrome 的屏幕（理想）：

下面是 IE11 的屏幕：

<style>
img 
    float: left;
    margin-right: 10px;

ol 
    position: relative;
    padding-left: 0;
    left: 15px;

</style>

<img src="https://via.placeholder.com/100">
<div>Below are bullets</div>
<ol>
    <li>This is the bullet</li>
    <li>This is the bullet</li>
    <li>This is the bullet</li>
    <li>This is the bullet</li>
    <li>This is the bullet</li>
</ol>

【问题讨论】：

这能回答你的问题吗？ Is there really no way to wrap text around an image in flexbox? 【参考方案1】：

我尝试修改代码，尝试达到和其他浏览器一样接近的结果。

我应用了媒体查询，并尝试专门为 IE 浏览器设置列表样式位置、文本缩进和填充。

现在它看起来与在其他浏览器中的外观几乎相似。

修改代码：

<!DOCTYPE html>
<html>
   <head>
      <title>Untitled Page</title>
      <style>
         @supports not (-ms-high-contrast: none) 
         
         img 
         
         float: left;
         margin-right: 10px;
         
         ol 
         
         position: relative;
         padding-left: 5px;
         left: 10px;
         
         #container
         
         width:300px;
         background-color:skyblue;
         padding:5px;
         
         
         @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) 
         
         img 
         
         float: left;
         margin-right: 35px;
         
         ol 
         
         position: relative;
         padding-left: 5px;
         margin-left: 10px;
         
         ol li 
         
         list-style-position: inside;
         text-indent: -1.8em;
         padding-left: 1em;
         
         #container
         
         width:300px;
         background-color:skyblue;
         padding:5px;
         
         
      </style>
   </head>
   <body>
      <div id="container">
         <img src="https://via.placeholder.com/100">
         <div>Below are bullets</div>
         <ol>
            <li>This is the bullet This is the bullet This is the bullet</li>
            <li>This is the bullet</li>
            <li>This is the bullet</li>
            <li>This is the bullet This is the bullet This is the bullet</li>
            <li>This is the bullet</li>
            <li>This is the bullet</li>
         </ol>
      </div>
   </body>
</html>

在 IE 11 和 Google Chrome 浏览器中的输出：

此外，您可以尝试根据自己的要求修改代码。

【讨论】：

谢谢迪帕克。看起来不错！但是 list-style-position 会弄乱第二行开始的文本换行。我想保持列表项在多行时正确显示。有什么办法可以解决吗？你能提供一个例子来说明多行的问题吗？我将尝试检查它并尝试找到任何可能的解决方案。感谢您的理解。当然，我想像这样正确显示列表项。 imgur.com/d12k92C 请查看更新后的答案。它可以帮助您解决问题。您可以根据自己的需要进行修改。那个伟大的 Deepak-MSFT，这就是我想要的。我刚刚在css上修改了一些填充，它工作正常。 @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) img float: left;右边距：15px； ol 位置：相对；左填充：0；左边距：0；填充权：1.8em；左：1.8em； ol li list-style-position: inside;文本缩进：-1.8em；左填充：2em；

以上是关于订单列表的浮动图像和文本换行的主要内容，如果未能解决你的问题，请参考以下文章

浮动流体图像离开没有文字换行

Python遥感图像处理应用篇：Landsat8 Collection2 Level2数据下载及批量计算NDVI指数

Textview Android Kotlin 中的订单列表

在 WooCommerce 我的帐户订单列表上显示产品缩略图

在 WooCommerce 管理员订单列表上显示产品图片的问题