-1
私のウェブサイトでは、右に表示されている対応するテキストブロックで画像を取得しようとしています。私はこれらのたくさんの回を繰り返すでしょう（本質的にそれはリストの各イメージの対応する段落のイメージのリストです）。画面サイズが736pxのときは、テキストのブロックを画像の下側に表示するのではなく、画像を中央に配置したいと思います。私はこれがタブレットと携帯電話をキャプチャすると思うので、私は736ピクセルを選択しました。divを整列して画面のサイズに応じて変更する
これについては、divタグと@mediaクエリを使用しています。デスクトップの場合、私は20％の幅の画像と80％のテキストを隣に置いています。ブラウザのサイズが736pxに変更されると、イメージが50％、テキストが100％になり、イメージの下に表示されます。
@mediaで遊ぶようになると、壁に当たって何が間違っているかわかりません。誰も助言することができますか？
また、HTMLをコピー＆ペーストしてイメージとテキストを変更して以前のものの下に表示させるには、何を追加する必要がありますか？私はこれを自動的に行うべきだと考えて正しいのですか？
CSS：
div.sidebyside{
@media only screen and (max-width : 736px){
border: 5px solid #000000;
}
@media only screen and (min-width : 737px){
float:left;
border: 5px solid #000000;
}
}
div#image{
@media only screen and (max-width : 736px){
width : 50%;
align-items: center;
}
@media only screen and (min-width : 737px){
width : 20%;
}
}
div#info{
@media only screen and (max-width : 736px){
width : 100%;
}
@media only screen and (min-width : 737px){
width : 70%;
padding-left: 5%;
}
}
HTML：
<div id="image" class="sidebyside"><img src="url" alt="" /></div>
<div id="info" class="sidebyside">
<p style="text-align: justify;">Nullam id dolor id nibh ultricies vehicula ut id elit. Donec id elit non mi porta gravida at eget metus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Nullam id dolor id nibh ultricies vehicula ut id elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Etiam porta sem malesuada magna mollis euismod. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum.</p>
</div>
は本当にCSSですか？ –
@PraveenKumar Yep。しかし、非常に低い品質。 jsfiddleを入力してください。 –
@ K.Daniek Nopes。それが有効かどうかまだ分かりません。 –