画像とテキストを横に並べるにはどうすればよいですか? HTML CSS フレキシブル ボックス
P粉350036783
2023-08-26 00:23:03
<p>テキストが画像の下に配置されます。テキストを画像の横に縦方向に配置したいと考えています。 <code>flex-direction:column</code> と <code>justify-content:center</code> を追加しようとしましたが、うまくいきませんでした。 <code>float</code> も試しましたが、それも機能しませんでした。文字と画像を並べて配置する方法がわかりません。どうすれば横に並べることができますか?私のコードにエラーはありますか? </p>
<p><br /></p>
<pre class="brush:css;toolbar:false;">.whoweare {
パディング: 80px 0px 50px;
背景色: #000000;
}
.whoweare #whoweareimg {
幅: 100%;
最小幅: 200px;
}
.whoweare .content {
-webkit-display: フレックス;
ディスプレイ: フレックス;
フレックスラップ: ラップ;
/* フレックス方向: 列; */
/* justify-content: center; */
}
.whoweare .content .box {
/* パディング:5px;
フレックス:0 0 100%;
最大幅: 100%; */
パディング: 5px;
フレックス: 0 0 100%;
最大幅: 100%;
}
.whoweare .content #whoweareimg {
幅: 50%;
-webkit-transform: 回転 Y(180 度);
変換: 回転 Y(180 度);
パディング: 30px;
}
.whoweare .content h2 {
フォントサイズ: 50px;
フォントの太さ: 500;
マージン: 20px;
色: #ffffff;
パディング: 0px 0px 20px;
}
.whoweare .content p {
フォントサイズ: 20px;
行の高さ: 50px;
色: #ffffff;
マージン: 20px;
パディング: 0px 0px 20px;
フォントファミリー: 'Open Sans'、サンセリフ;
}</pre>
<pre class="brush:html;toolbar:false;"><section class="whoweare" id="whoweare">
<div class="コンテナ">
<div class="コンテンツ">
<div class="box text wow slideInRight">
<!-- <div class="クラス項目"> -->
<div class="item wow bounceInUp">
<!-- <div class="item-img"> -->
<img id="whoweareimg" src="https://via.placeholder.com/50" alt="クラス" />
</div>
<div class="box text wow slideInRight">
<h2>私たちは誰ですか</h2>
<p>UNDRGRND マッスル & フィットネス、ストリート カルチャーとボディビルディングとフィットネス ライフスタイルが融合。私たちの目標は、ボーン/トロント都市圏でユニークでモダンなトレーニング体験を会員に提供することです。
</br>
</br>
比類のないトレーニングを実現するユニークなトレーニング雰囲気を体験してください。 IFBB プロアスリートは、会員のライフスタイルや競技準備の目標を達成できるよう、特別なトレーニング セッションを提供しています。この施設では、アトランティス、サイバー、アーセナルなど、市場で最高のフィットネス機器を提供します。
</br>
</br>
UNDRNRGD では、私たち全員が 1 つの大きな家族として協力して働いています。
<p><br /></p></pre>
<div class="box text wow slideInRight">
の 1 つが別の<div class="box 内にネストされているため、HTML コードに問題があるようです。 text wow slideInRight">
しかし、とにかく、これがあなたの問題を解決するために私が思いついたコードです。アイデアは
.whoweare .content .box:first-child
がエラスティック コンテナーであり、その 2 つの子要素 (<div class="item wow bounceInUp">
と別の<div class="box wow text slideInRight">
) が並べて配置されます。