画像を形そのままで横に並べたい

画像を形そのままで並べたくてcolumn-countを使っているのですが、左の図のように並びます
右の図のように並べる方法はありますか？

質問者からの補足コメント

• 指摘を頂いてリストにしていたせいかと思い、消したのですが、やはり左のように表示されます。
  コード自体が間違っているのでしょうか？
  
  
  <div class="sample01">
  <img src="" alt="[画像]">
  <img src="" alt="[画像]">
  <img src="" alt="[画像]">
  <img src="" alt="[画像]">
  </div>
  
  .sample01{
  column-count: 4;
  column-gap: 0;
  margin: 0 auto;
  max-width: 1400px;
  background:#999;
  }
  .sample01 img{
  width:100%;
  height: 100%;
  }

  No.1の回答に寄せられた補足コメントです。 補足日時：2019/03/12 14:29

• 横に表示できました、ありがとうございます。
  
  できれば列の縦幅が均等になるように画像を並べたいのですが、それは不可能でしょうか？

  No.2の回答に寄せられた補足コメントです。 補足日時：2019/03/13 12:34

• すみません、不具合で画像が添付できていませんでした。
  度重なる質問で申し訳ないのですが、このような並びにするのは難しいでしょうか？
  縦幅が長いものの影響で短いものの上に空く隙間がなくせれば、画像の様な形でなくても結構です。

  
  No.3の回答に寄せられた補足コメントです。 補足日時：2019/03/13 14:19

No.3 ベストアンサー 回答者： yambejp 回答日時： 2019/03/13 13:04

.sample01 li{

list-style:none;
display:inline-block;
width:23%;
text-align:center; /* これ追加 */
}

No.2 回答者： yambejp 回答日時： 2019/03/12 14:42

たとえｂ

<style>
.sample01{
max-width: 1400px;
background:#999;
}
.sample01 li{
list-style:none;
display:inline-block;
width:23%;
}
</style>

<div class="sample01">
<ul>
<li><img src="" alt="[画像1]"></li>
<li><img src="" alt="[画像2]"></li>
<li><img src="" alt="[画像3]"></li>
<li><img src="" alt="[画像4]"></li>
<li><img src="" alt="[画像5]"></li>
<li><img src="" alt="[画像6]"></li>
<li><img src="" alt="[画像7]"></li>
<li><img src="" alt="[画像8]"></li>
<li><img src="" alt="[画像9]"></li>
<li><img src="" alt="[画像10]"></li>
<li><img src="" alt="[画像11]"></li>
<li><img src="" alt="[画像12]"></li>
</div>

No.1 回答者： yambejp 回答日時： 2019/03/12 12:59

普通に羅列すれば右のようになりませんか？