1

モバイル デバイスで自分の Web サイトの見栄えを良くしようと試みています (そして失敗しています) が、正しく表示されません。画像は右に表示されていますが、テキストのボックスは単なる細い帯です。画像を確認すると、ボックスが画像を包み込み、テキストが画像と同じ幅になるはずです。

http://cdn1.cdnme.se/886420/6-3/problem_51612adfddf2b3563ed16d2f.jpg

私はこれが初心者で、自分が何をしているのかよくわかりませんが、今回は不可能に感じますが、失敗することで学ぼうとしています. 私が間違ったことはありますか？何か不足していますか？それを機能させるためにやるべきことはこれだけではありませんか？私が使用するメディアクエリのコードは次のとおりです。

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
#wrapper {
 width: 100%;
 }
 #container {
 width:100%; 
 margin: auto; 
 }
  #content {
 width: 100%;
 float: right;
 }
 #post {
 width: 100%;
 }
 #post img {
    max-width: 100%;
    margin: 0px 5px 20px 0px;
 float: left;
border-radius: 5px 5px 0px 0px;
-webkit-box-shadow: 0px 3px 5px#000000;
 -moz-box-shadow: 0px 3px 5px#000000;
box-shadow: 0px 3px 5px#000000;
 }
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
#wrapper {
 width: 100%;
 }
 #container {
 width:100%; 
 margin: auto; 
 }
  #content {
 width: 100%;
 float: right;
 }
 #post {
 width: 100%;
 }
 #post img {
    max-width: 100%;
    margin: 0px 5px 20px 0px;
 float: left;
border-radius: 5px 5px 0px 0px;
-webkit-box-shadow: 0px 3px 5px#000000;
 -moz-box-shadow: 0px 3px 5px#000000;
box-shadow: 0px 3px 5px#000000;
 }
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
#wrapper {
 width: 100%;
 }
 #container {
 width:100%; 
 margin: auto; 
 }
  #content {
 width: 100%;
 float: right;
 }
 #post {
 width: 100%;
 }
 #post img {
    max-width: 100%;
    margin: 0px 5px 20px 0px;
 float: left;
border-radius: 5px 5px 0px 0px;
-webkit-box-shadow: 0px 3px 5px#000000;
 -moz-box-shadow: 0px 3px 5px#000000;
box-shadow: 0px 3px 5px#000000;
 }
}
4

1 に答える 1

0

cleartext-box は、その前にある画像またはコンテンツとともにフローティングされると想定されるため、要素がフローティングされるプロパティを使用してみてください。

@media only screen 
and (max-width : 320px) {

#content {
 width: 100%;
 float: right;
clear:both;    /*Important*/
 }

#post img {
max-width: 100%;
margin: 0px 5px 20px 0px;
float: left;
clear:both;    /*Important*/
border-radius: 5px 5px 0px 0px;
-webkit-box-shadow: 0px 3px 5px#000000;
 -moz-box-shadow: 0px 3px 5px#000000;
box-shadow: 0px 3px 5px#000000;
 }
}
于 2013-04-08T07:42:22.357 に答える