我正在尝试创建一个流畅的布局,其中包裹的内容从左到右流动交替到从右到左流动。见下面的例子:
1 2 3 4 5
10 9 8 7 6
11 12 13 14 15
20 19 18 17 16
标记和样式http://codepen.io/2ne/pen/IiGCx
我尝试过flex box和multi column layouts,但这些都没有对我有用。我希望有人可以帮助我理想的纯css解决方案,因为html是动态的,所以不会改变html。如果不是一个有效的javascript / jquery解决方案。
我发现这个问题的原因是没有固定的宽度,所以我不知道浏览器何时包装内容。
li {
width: 160px;
float: left;
}
非常感谢您提供的任何帮助。
<ul class="clearfix">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
<li>18</li>
<li>19</li>
<li>20</li>
</ul>
答案 0 :(得分:1)
这会改变您的HTML,但只会添加类。如果你真的无法改变任何东西,你可以使用JS / jQuery添加这些类,这应该不会太难。
<style>
.r{
float:right;
width:20%;
}
.l{
float:left;
width:20%;
}
</style>
<ul class="clearfix">
<li class="l">1</li>
<li class="l">2</li>
<li class="l">3</li>
<li class="l">4</li>
<li class="l">5</li>
<li class="r">6</li>
<li class="r">7</li>
<li class="r">8</li>
<li class="r">9</li>
<li class="r">10</li>
<li class="l">11</li>
<li class="l">12</li>
<li class="l">13</li>
<li class="l">14</li>
<li class="l">15</li>
<li class="r">16</li>
<li class="r">17</li>
<li class="r">18</li>
<li class="r">19</li>
<li class="r">20</li>
</ul>
答案 1 :(得分:0)
这是一种使用Sass,CSS Flexbox和&#39;命令解决问题的天真方法。属性。
请参阅naive snakey flexbox上Brady Hullopeter(@bradyhullopeter)的笔CodePen。
import nltk
import nltk.corpus
import nltk.tokenize
import nltk.stem.snowball
import string
stopwords = nltk.corpus.stopwords.words('english')
stopwords.extend(string.punctuation)
stopwords.append('')
stemmer = nltk.stem.snowball.SnowballStemmer('english')
def get_match_ratio(s1, s2):
tokens_s1 = [token for token in nltk.word_tokenize(s1.lower())]
tokens_s2 = [token for token in nltk.word_tokenize(s2.lower())]
stems_s1 = [stemmer.stem(token) for token in tokens_s1]
stems_s2 = [stemmer.stem(token) for token in tokens_s2]
ratio = len(set(stems_s1).intersection(stems_s2)) / float(len(set(stems_s1).union(stems_s2)))
return ratio
MyInput = 'Minion (2015)'
list2 = ['minion (2015)', 'minion (2016)', 'minion (2017)', 'minion (2018)', 'minion (2019)']
similarity = [[item, get_match_ratio(MyInput, item)] for item in list2]
print similarity
&#13;