私は、すべての奇数要素を左に配置し、すべての偶数要素を下の画像のように配置する必要があります。浮き彫り要素トップアライメント
私がこれまで行っているもののためにバイオリンを確認してください。 https://jsfiddle.net/afelixj/na4fwkg7/
3番目の緑色の項目の上下に余分なスペースを削除するにはどうすればよいですか?
ここでコード
*{box-sizing:border-box;}
ul{
margin: 0;
padding: 0;
}
li{
list-style: none;
border: 2px solid red;
margin: 0 0 10px;
width: 50%;
}
li:nth-child(odd){
float: left;
clear: left;
}
li:nth-child(even){
border: 2px solid green;
float: right;
clear: right;
}
<ul>
<li>test</li>
<li>Lorem ipsum dolor sit amet</li>
<li>, consectetur adipisicing elit. Reiciendis aliquid eos sint et autem optio? Optio </li>
<li>culpa, nisi, dolore maiores aut vel cum</li>
<li> totam non ab voluptatibus assumenda quasi, blanditiis?</li>
<li>test</li>
<li>Lorem ipsum dolor sit amet</li>
<li>, consectetur adipisicing elit. Reiciendis aliquid eos sint et autem optio? Optio </li>
<li>culpa, nisi, dolore maiores aut vel cum</li>
<li> totam non ab voluptatibus assumenda quasi, blanditiis?</li>
<li>test</li>
<li>Lorem ipsum dolor sit amet</li>
<li>, consectetur adipisicing elit. Reiciendis aliquid eos sint et autem optio? Optio </li>
<li>culpa, nisi, dolore maiores aut vel cum</li>
<li> totam non ab voluptatibus assumenda quasi, blanditiis?</li>
</ul>
削除したい領域はどれですか? – ketan
3番目の緑色の項目の上下に余分なスペースがあります。内容は "test" –
です。これはdisplay:inline-blockを使うのに最適な解決策だと思います。あなたはそれを試みることができます –