如何使用有序列表放置不同的宽度和高度图像

Question

请看图片。 基本上我想制作有序列表。我想插入图像，有时候有时会留下有序列表。

它就像是一个具有不同宽度和高度图像的文章。但有序列表。如果它与段落我没有问题。但是我被列入了有序列表。

任何人都可以帮助我吗？  

Answer 1

选项1：

ol li {
  list-style-position: inside;
}

选项2：

将float:left;添加到您的ol

如果您在不希望它们之后发现浮动后的元素，请插入新的div以清除浮动属性： <div style="clear: left;" />

如果您只想对特定的类或ID执行此操作，则可以执行此操作，例如：

.myclass {
  list-style-position: inside;
}

如果没有看到您的确切代码，很难给出明确的答案，但其中一个选项可以解决问题

Answer 2

编辑：

Here's the JSFiddle

这些行表示您删除列表的默认列表样式，使用before属性，您可以计算G3:L84个元素的数量，并将其与文本无关地设置样式

<li>

看到这篇文章为@afelixj说： Skip ordered list item numbering

Answer 3

您可以使用无序列表尝试以下方法，并使用here提到的方法添加数字..

图片也会添加到li，其中包含skip类。并向左或向右添加类以添加float:left;和float:right;

ul {
   counter-reset:yourCounter;
   list-style:none;
}
li{
  padding-left: 40px;
  margin: 0 0 20px;
}
li:before{
  position: absolute;
  margin-left: -40px;
  font-size: 40px;
  line-height: 40px;
}
ul li:not(.skip) {
counter-increment:yourCounter;
}
ul li:not(.skip):before {
content:counter(yourCounter);
}
ul li.skip:before {
content:"";
}
li.right{
  float: right;
  clear: right;
}

<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum sequi laudantium, nihil molestiae non fugit, delectus dolores veritatis illum est explicabo eveniet quo eaque aut tempora, cumque minus nisi animi.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum sequi laudantium, nihil molestiae non fugit, delectus dolores veritatis illum est explicabo eveniet quo eaque aut tempora, cumque minus nisi animi.</li>
<li class="skip right"><img src="http://lorempixel.com/300/250/nature/" alt=""></li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum sequi laudantium, nihil molestiae non fugit, delectus dolores veritatis illum est explicabo eveniet quo eaque aut tempora, cumque minus nisi animi.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum sequi laudantium, nihil molestiae non fugit, delectus dolores veritatis illum est explicabo eveniet quo eaque aut tempora, cumque minus nisi animi.</li>
<li class="skip right"><img src="http://lorempixel.com/360/230/nature/" alt=""></li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum sequi laudantium, nihil molestiae non fugit, delectus dolores veritatis illum est explicabo eveniet quo eaque aut tempora, cumque minus nisi animi.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum sequi laudantium, nihil molestiae non fugit, delectus dolores veritatis illum est explicabo eveniet quo eaque aut tempora, cumque minus nisi animi.</li>
</ul>

https://jsfiddle.net/afelixj/07xe4p4x/2/