文章を横に並べるようにしたい

Question

前提・実現したいこと

私は今、HTMLとCSSとJSでホームページを作っています。
文章を横に並べたいのですが、調べたりしてもよく理解できませんでした。

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

エラーはないです。

該当のソースコード

<div class="scrollme box1">
<figcaption class="w50 fl rr"><strong>・・・</strong>・・・</figcaption>
</div>
<div class="scrollme box1">
<figcaption class="w50 fl rr"><strong>・・・</strong>・・・</figcaption>
</div>
<div class="scrollme box1">
<figcaption class="w50 fl rr"><strong>・・・</strong>・・・</figcaption>
</div>
<div class="scrollme box1">
<figcaption class="w50 fl rr"><strong>・・・</strong>・・・</figcaption>
</div>
<div class="scrollme box1">
<figcaption class="w50 fl rr"><strong>・・・</strong>・・・</figcaption>
</div>
<div class="scrollme box1">
<figcaption class="w50 fl rr"><strong>・・・</strong>・・・</figcaption>
</div>

『・・・』のところが個人情報です。

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

visual studio codeを使っています。
visual studio code Version: 1.38.0

このコードのどこをどういじれば横に並ばせることができますか？
わかる方ご教授お願いします。

Answer 1

簡単で良ければですが、cssに下の内容を加えてみてどうですか？
.scrollme{
float:right;
}
イメージしているものと合っていればいいですが！

Comments

[退会済みユーザー]

素早い回答ありがとうございます！！(＞人＜;)
でも、すみません。私、無知なものでそのおっしゃている意味がわからないのです。もう少しわかりやくすは無理でしょうか？

[tomtom1]

了解しました！
今、各figcaptionは、scrollmeとbox1の2つのクラス（属性）を持つdiv（箱の様なもの）で囲われていますね！
そこで、CSS（HTML や XML の要素をどのように修飾するかを指示するタイルシート）の中に、scrollmeのクラスに、float:right（要素を右に寄せる指示）を指示しています。

やり方：
htmlファイルにリンクされているcssのファイルに、
.scrollme{
float:right;
}
をコピペすれば反映されます！

[退会済みユーザー]

おおお！できました！！ですが・・・汚くなっています。

例ですが、tonkoという名前が
ton
ko
というような感じで汚くなってしまいます。その原因はなんでしょうか？

[tomtom1]

どうしても、『・・・』の個人情報部分がどのようになっているか分からないが故にそこは答え用がないですね> <。でも例えば、以下のようにtonkoをベタ打ちした場合、こっちでは綺麗処理されますよ！
<div class="scrollme box1"><p class="w50 fl rr"><strong>tonko</strong>tonko</p>
</div>

因みにですが、全体を右よりでなく、左よりにしたければ、
.scrollme{
float:left;
}
必要であれば！

[退会済みユーザー]

すみません。綺麗にもならず、関係ない他の部分が消えてしまいました。

>どうしても、『・・・』の個人情報部分がどのようになっているか分からないが故にそこは答え用がないですね> <。

そうですよね。すみません。もう少し調べたりして頑張ってみます。

[tomtom1]

頑張ってくださいね！

[退会済みユーザー]

はい！ありがとうございました！ベストアンサーにさせていただきますね！！(^^)