画像とテキスト情報の検索

Iv'eは、ページの中央に画像を配置し、左右に2つのテキストセクションを配置しようとしていました。右のテキストセクションはイメージの下に配置されており、私は同じ行に配置できません。救助へ画像とテキスト情報の検索

<pre> 
#ronimg 
{ 
    margin-top: 30px; 
    float: right; 
    margin-right: 600; 
    clear: none; 
} 
#ronalfor 
{ 
    color: #43acf8; 
    font-style: oblique; 
    margin-top: 30px; 
    border: 5px inset #b1b53e; 
    float:left; 
    width: 500px 

} 

#another 
{ 
    clear: both; 
    color: #43acf8; 
    font-style: oblique; 
    margin-top: 30px; 
    border: 5px inset #b1b53e; 
    float:right; 
    width: 500px 
} 
</pre>

出典

2016-07-01 PythIsReal

フレキシボックス：

<pre> 
<html> 
    <head> 
     <link rel="stylesheet" href="EXC.css"> 
     <script type="text/javascript" src="EXC.js"></script> 
    </head> 
    <body> 
     <div id="ronimg"> 
      <img src="achivs.png"/> 
      <br> 
      <a href="EXC.html"><button class="button" style="vertical-align:middle"><span> GOBACK </span></button></a> 
     </div> 
     <div id="ronalfor"> 
    THIS IS THE FIRST EXAMPLE 


     </div> 

       <div id="another"> 
    THIS IS THE SECOND EXAMPLE 

     </div> 
    </body> 
</html> 
</pre>

これは、CSSのコードは次のとおりです。

は、ここに私のHTMLコードです。あなたのHTMLの周りにflexboxコンテナを追加し、コンテナの子をフレックスの子に暗黙的にしました。次に、私はorderプロパティを使って子供たちをあなたの望みどおりに配置します（中間のイメージとそれに隣接するテキストセクションがあります）。

.flex-container { 
 
    display: flex; 
 
    margin-top: 30px; 
 
} 
 

 
#ronimg img { 
 
    width: 100%; 
 
    max-width: 100%; 
 
    height: auto; 
 
} 
 

 
#ronimg { 
 
    order: 1; /* image in the middle */ 
 
} 
 

 
#ronalfor, 
 
#another { 
 
    border: 5px inset #b1b53e; 
 
    font-style: oblique; 
 
    color: #43acf8; 
 
    flex-basis: 200px; /* sets a minimum width for these elements */ 
 
} 
 

 
#ronalfor { 
 
    order: 0; /* section on the left */ 
 
} 
 

 
#another { 
 
    order: 2; /* section on the right */ 
 
}

<div class="flex-container"> 
 

 
    <div id="ronimg"> 
 
    <img src="http://placekitten.com/200/200" /> 
 
    <br> 
 
    <a href="EXC.html"> 
 
     <button class="button" style="vertical-align:middle"><span> GOBACK </span></button> 
 
    </a> 
 
    </div> 
 

 
    <div id="ronalfor"> 
 
    THIS IS THE FIRST EXAMPLE 
 
    </div> 
 

 
    <div id="another"> 
 
    THIS IS THE SECOND EXAMPLE 
 
    </div> 
 

 
</div>

jsfiddle demo

出典

2016-07-01 18:45:33

ありがとうございますが、まだ問題があります。今、私はイメージを中央と横のセクションに置くことができますが、イメージはページの主要な場所をとり、テキストセクションの両側に小さな場所があります。 – PythIsReal

@ user6539484サンプルコードを変更して不要な浮動小数点数を削除しました。 '＃ronalfor'と'＃another'が 'flex-basis：200px;'を持つことに注目してください。これは、これらのサイド要素が200ピクセルの最小幅を持ち、もう1つのフレックスアイテムである '＃ronimg'が残りのスペースを占めることを意味します。 –

ありがとうございます！できます！フレックスコマンドと注文コマンド – PythIsReal

同じ行でそれを見つけるになり#another { clear:both; }を削除します。

出典

2016-07-01 18:45:42 vignesh

画像とテキスト情報の検索

答えて

関連する問題