HTML CSS floatで横並びに表示させたい

Question

前提・実現したいこと

floatを使って記事を横並びに表示させたいです。

発生している問題・エラーメッセージ

記事は左右に分かれて表示されるのですが、階段状になって表示されてしまいます。
デベロッパーツールでみた結果、上になっている記事の右のmarginが横いっぱいまで広がっているのが原因みたいですがなぜそのようになっているのかわかりません。

該当のソースコード

<h2 class="wrapper-main__hidden">ARTICLES</h2>
        <div class="clearfix">
          <a href="#" class="wrapper-main--article-box">
            <h3 class="article-box--title">実務で使えるHTML/CSSモダンコーディングTIPS</h3>
            <p class="article-box--desc">新しい要素が増えて大幅に表現力が広がったHTML5/CSS3を活用し、モダンなコーディングにチャレンジしましょう！</p>
            <time class="article-box--date" datetime="2015-06-17">2015.06.17 WED</time>
            <img class="article-box--iamge" src="images/article.jpg" alt="コーディング画面">
          </a>
          <a href="#" class="wrapper-main--article-box">
            <h3 class="article-box--title">実務で使えるHTML/CSSモダンコーディングTIPS</h3>
            <p class="article-box--desc">新しい要素が増えて大幅に表現力が広がったHTML5/CSS3を活用し、モダンなコーディングにチャレンジしましょう！</p>
            <time class="article-box--date" datetime="2015-06-17">2015.06.17 WED</time>
            <img class="article-box--iamge" src="images/article.jpg" alt="コーディング画面">
          </a>
        </div>
.clearfix::after{
  content: '';
  display: block;
  clear: both;
}

.wrapper-main--article-box{
  position: relative;
  display: block;
  width: 315px;
  height: 360px;
  margin-bottom: 30px;
  padding: 210px 15px 0;
  box-shadow: 6px 6px 8px -4px rgba(0,0,0,0.15);
  transition: opacity 0.15s;
}
.wrapper-main--article-box:hover{
  opacity: 0.8;
}
.wrapper-main--article-box:nth-last-of-type(odd){
  float: left;
}
.wrapper-main--article-box:nth-of-type(even){
  float: right;
}
.wrapper-main--article-box .article-box--title{
  margin-top: 30px;
  color: #555;
  font-size: 1.4rem;
  line-height: 1.6;
}
.wrapper-main--article-box .article-box--desc{
  margin-top: 5px;
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wrapper-main--article-box .article-box--date{
  position: absolute;
  right: 0;
  bottom: 15px;
  display: block;
  width: 160px;
  padding: 4px;
  background-color: #b5d264;
  color: #2d3d54;
  text-align: center;
  letter-spacing: 1px;
  font-weight: bold;
  font-size: 1.1rem;
}
.wrapper-main--article-box .article-box--iamge{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

google chromeで表示させています。

Comments

[hatena19]

HTML と CSS は別のコードブロックに分けてください。また最初の```の後に言語名を付けてください。
下記のような感じで。
```html
HTMLコード
```

```css
CSSコード
```

Answer 1

.wrapper-main--article-box:nth-last-of-type(odd){
  float: left;
}

上記を下記に修正してください。last- が余分。

.wrapper-main--article-box:nth-of-type(odd){
  float: left;
}

ただ、floatで横並びにする方法は古い手法です。現在は、Flexbox か Grid を使います。

Flexboxのコード例

具体的には、

.clearfix::after{
  content: '';
  display: block;
  clear: both;
}

.wrapper-main--article-box:nth-of-type(odd){
  float: left;
}
.wrapper-main--article-box:nth-of-type(even){
  float: right;
}

上記の部分を削除して、下記のコードを挿入すれば同様の結果になります。

.clearfix {
  display: flex;
  justify-content: space-between;
}

Comments

[kelt22]

詳しい説明ありがとうございます。