画像とテキストを横に並べるにはどうすればよいですか? HTML CSS フレキシブル ボックス
P粉350036783
P粉350036783 2023-08-26 00:23:03
0
1
677
<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>
P粉350036783
P粉350036783

全員に返信(1)
P粉420868294

<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">) が並べて配置されます。

リーリー リーリー
いいねを押す +0
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート