インラインイメージとDIVと応答性

Question

私はプログラマーではありません。私はこのページを設計どおりに構築しようとしていますが、レスポンシブにするのは苦労しています。 デスクトップの場合は、同じ行に画像を左側に、divを右側に配置したいと考えています。しかし、モバイルでは、私は100％になりたいとお互いの上にある。そして、これの上に、コンテンツが1000px以下であることをdivでラップしてもらいたいです。 また、画像に整列させたいdivには、内部に画像があり、テキストもあります。

これは私のCSSがどのように見えるかです：

.centerdiv{ 
    width:100%; 
    height:100%; 
    margin:auto; 
    text-align: center; 
} 
.violet{ 
    background:#c3c1ea; 
    z-index: 1; 
    width:100%; 
    overflow: hidden; 
    display:block; 

} 
.textondiv{ 
    padding: 0.5em 3em; 
    font-family: 'Futura BT Light', 'Century Gothic'; 
    font-size: 16px; 
    color: #fff; 
    text-align:left; 
} 
.titleviolet { 
    z-index: 3; 
    margin:auto; 
    width: 100%; 
    text-align: center; 
} 

そして、これはHTMLです：

<div style="text-align: center;"> 
    <img src="https:..." /> 
    <div class="violet"> 
    <div class="titleviolet"><img src="https:..."/> 
     <div class="textondiv">bla bla bla bla</div> 
    </div> 
    </div> 
</div> 

（も...私は.jsファイルで働いたことはありませんが、私は図のように喜びましたこれを簡単にする方法を教えてください） 私は助けてくれてありがとう！ありがとう！

Answer 1

ターゲット・デバイスの全てがそれをサポートしている場合、あなたは簡単にフレキシボックス（http://caniuse.com/#feat=flexbox）とのレイアウトを持つことができ

私は少しフレックス利用するようにコードを変更：http://codepen.io/davidkatona/pen/woXjxy

<div class="centerdiv"> 
    <img class="responsive-image" src="http://placehold.it/350x150" /> 
    <div class="violet"> 
    <div class="titleviolet"> 
     <img src="http://placehold.it/350x150"/> 
     <div class="textondiv"> 
     bla bla bla bla 
     </div> 
    </div> 
    </div> 
</div> 

.centerdiv{ 
    width:100%; 
    max-width: 1000px; 
    height:100%; 
    display: flex; 
    flex-wrap: wrap; 
} 

.responsive-image { 
    flex-grow: 1; 
} 

.violet{ 
    background:#c3c1ea; 
    z-index: 1; 
    overflow: hidden; 
    display:block; 
    flex-grow: 1; 
} 


.textondiv{ 
    padding: 0.5em 3em; 
    font-family: 'Futura BT Light', 'Century Gothic'; 
    font-size: 16px; 
    color: #fff; 
    text-align:left; 
} 

.titleviolet { 
    z-index: 3; 
    margin:auto; 
    width: 100%; 
    text-align: center; 
} 

場合は私に知らせてくださいそれはあなたのニーズに合っています。

もう1つのヒント：通常は、バックグラウンドを変更して青色にしたいときはいつでも、 ".violet"のようなデザイン関連の代わりに ".main-content-container"のようなセマンティッククラス名を使用する方がよい1行の変更だけではなく、htmlの "violet"クラスが見つかるたびに置き換えなければなりません。

Answer 2

ちょうどこの...

<div style="text-align: center;"> 
    <img class="responsive-image" src="http://placehold.it/350x150" /> 
    <div class="violet"> 
    <div class="titleviolet"><img class="responsive-image" src="http://placehold.it/350x150" /> 
     <div class="textondiv">bla bla bla bla</div> 
    </div> 
    </div> 
</div> 

Answer 3

用表示インラインフレックスcenterdiv上dextopビューのために、あなたのHTMLに追加する逃してみてください。また、イメージにはimg-responsiveクラスを使用します。そして、最も重要なことは、モバイルビューを実現するためにモバイルデバイスにメディアクエリCSSを使用する必要があることです。 LiveOnFiddle

body{ 
 
margin:0; 
 
} 
 
.img-responsive { 
 
    width: 100%; 
 
    display: block; 
 
    margin: 0 auto; 
 
    height: auto; 
 
} 
 
.centerdiv { 
 
display:inline-flex; 
 
    width:100%; 
 
    height: 100%; 
 
    margin: auto; 
 
    text-align: center; 
 
} 
 

 
.violet { 
 
    background: #c3c1ea; 
 
    z-index: 1; 
 
    width: 100%; 
 
    overflow: hidden; 
 
    display: block; 
 
} 
 

 
.textondiv { 
 
    padding: 0.5em 3em; 
 
    font-family: 'Futura BT Light', 'Century Gothic'; 
 
    font-size: 16px; 
 
    color: #fff; 
 
    text-align: left; 
 
} 
 

 
.titleviolet { 
 
    z-index: 3; 
 
    margin: auto; 
 
    width: 100%; 
 
    text-align: center; 
 
} 
 
@media only screen and (max-width:768px){ 
 
    .centerdiv{ 
 
    display:block; 
 
    } 
 
}

<div class="centerdiv"> 
 
<img class="img-responsive" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSipAOtp2qmDZB4Y7N8OE8nixMcnvKDAJvQJhdz1-aa3MX6-i1fcIDGSU-wow" /> 
 
    <div class="violet"> 
 
    <div class="titleviolet"><img class="img-responsive" src="https://choralista.pl/cfs/files/files/7pGEYN92YG8vyGcEJ/DemoStampRotate01-e1400242575670.png?token=eyJhdXRoVG9rZW4iOiIifQ%3D%3D" /> 
 
     <div class="textondiv">bla bla bla bla</div> 
 
    </div> 
 
    </div> 
 
</div>