CSSでのflexを使って2コラムレイアウトを作る | Make a two-column layout using flex in CSS

HTML

<div id="layout">
<div id="picture">
<img src=" " width="300px" height="200px">
</div>
<div id="text">
<p>お台場の～　　　| I went to TeamLab in Odaiba. The children were overwhelmed by the mysterious spatial world of images and made a fuss. </p>
</div>
</div>

普通に記述していくと上記のようになりますが、CSSのflexを使って横に並べると下記のようになります。
だらだらと下に長く表示しなくて少しすっきり見えます。こんな方法でも簡単に家族旅行のアルバムが作れますね。 | If you write it normally, it will be as above, but if you arrange it side by side using CSS flex, it will be as follows. It looks a little neat without displaying it for a long time underneath. You can easily make a family trip album with this method.

HTML

<div id="twolayout">
<div id="picture">
<img src=" " width="300px" height="200px">
</div>
<div id="text">
<p>お台場のチームラボに遊びに行きました。</p>
</div>
<div id="picture">
<img src=" " width="300px" height="200px">
</div>
<div id="text">
<p>帰りは豊洲から竹芝まで電車でなく、船で帰ってきました。</p>
</div>
</div>

CSS

#twolayout {
display: flex;
}
#text {
padding-left: 5px;
}

こんな形で3つ並べるのもいいかもしれません。| It may be good to arrange three in this way.

　　　

HTML

<div id="twolayout">
<div id="picture">
<img src=" " width="200px" height="200px">
</div>
<div id="text">
<p>お台場のチームラボに遊びに行きました。</p>
</div>
<div id="picture">
<img src=" " width="200px" height="200px">
</div>
<div id="text">
<p>帰りは豊洲から竹芝まで電車でなく、船で帰ってきました。</p>
</div>
<div id="picture">
<img src=" " width="200px" height="200px">
</div>
<div id="text">
<p>このような船で帰ってきました。</p>
</div>
</div>

CSS

#twolayout {
display: flex;
}
#text {
padding-left: 5px;
}

もっと深く学びたい人にはこちらもどうぞ。| For those who want to learn more deeply, this is also recommended.

　　

ぺージの先頭に戻る(Return to top of page)

プライバシーポリシー