-1

こんにちは、ページの左側に画像を配置し、ページの右側に説明を配置するページがあります。画像の下に配置している用語コンテンツと説明コンテンツがあります。最小化すると、画面に収まる説明内容の一部しか表示されません。しかし、最小化すると、説明が画像の下にドロップされ、用語が説明の下にドロップされる必要があります。

これは、体の左側に配置する画像のクラスです。

  .appPreview {
  max-width: 300px;
  height: 300px;
  border: 1px solid #cecece;
  margin-left : 55px;
  }
 span.grey {
 color: #cecece;
  }

これは、本文の右側に説明を配置するための私のクラスです:

 .right_content
    {
        float: left;

        border: 1px solid #CCC;
        width: 400px;
        margin-top : -520px;
      padding-bottom : 150px;
    }

これは、 Image と description の下に用語を配置するための私のクラスです。

div.MoreInfoterms {
width : 850px;
margin-right : 250px;
margin-left : 55px;
margin-top : 20px;
border: 1px solid #cecece;
background-color: #f7f9f9;
max-height:700px; 
margin-bottom : 20px;
}

これを達成する方法が本当にわからないので、どんな助けでも大歓迎です。

4

4 に答える 4

1

最小/最大サイズの境界を作成するだけで、必要な数だけ設定できます。

<link rel="stylesheet" href="/path/to/small.css" type="text/css" media="only screen and (max-width:800px)">

<link rel="stylesheet" href="/path/to/medium.css" type="text/css" media="only screen and (min-width:801px) and (max-width:1000px)">

<link rel="stylesheet" href="/path/to/large.css" type="text/css" media="only screen and (min-width:1001px)">
于 2013-11-11T14:34:09.110 に答える
1

これを試して：

@media screen and (max-width: 1024px) {
   .appPreview {
      display: block;
   }
   .right_content {
      float: none;
   }
   div.MoreInfoterms {
      width: 100%;
   } 
}

px の代わりにパーセンテージを使用する必要があります。

于 2013-11-11T14:34:16.547 に答える
1

レスポンシブ Web ページが必要な場合は、メディア クエリを使用する必要があります。標準的なものは、http: //css-tricks.com/snippets/css/media-queries-for-standard-devices/で確認できます。

それらは、そこに入れられたcssが適用されると基本的に変更されます。

于 2013-11-11T14:35:22.667 に答える