HTMLの記事要素を水平方向に表示

Question

article要素を水平に表示するにはどうしたらいいですか？インラインではなく、上下に1つずつ、

Answer 1

オプション1

• はfloat:left

article { 
 
    border: 1px red solid; 
 
    float: left; 
 
    width: 100px 
 
}

<article>article 1</article> 
 
<article>article 2</article> 
 
<article>article 3</article>

• はを設定オプションを設定します

body { 
 
    /*fix-inline-block*/ 
 
    font-size: 0 
 
} 
 
article { 
 
    border: 1px red solid; 
 
    display: inline-block; 
 
    width: 100px; 
 
    /*reset the font*/ 
 
    font-size: 16px 
 
}

<article>article 1</article> 
 
<article>article 2</article> 
 
<article>article 3</article>

オプション3

• はdisplay:table/table-cell

section { 
 
    display: table 
 
} 
 
article { 
 
    border: 1px red solid; 
 
    display: table-cell; 
 
    width: 100px 
 
}

<section> 
 
    <article>article 1</article> 
 
    <article>article 2</article> 
 
    <article>article 3</article> 
 
</section>

012を設定します

オプション4

• はdisplay:inline-flex

body { 
 
    /*fix-inline-flex*/ 
 
    font-size: 0 
 
} 
 
article { 
 
    border: 1px red solid; 
 
    display: inline-flex; 
 
    width: 100px; 
 
    /* reset the font */ 
 
    font-size: 16px 
 
}

<article>article 1</article> 
 
<article>article 2</article> 
 
<article>article 3</article>

オプションを設定5

• は、 "ベストプラクティス" と考えられるオプションdisplay:flex

section { 
 
    display: flex; 
 
} 
 
article { 
 
    border: 1px red solid; 
 
    width: 100px; 
 
    font-size: 16px 
 
}

<section> 
 
    <article>article 1</article> 
 
    <article>article 2</article> 
 
    <article>article 3</article> 
 
</section>