2

ポートレート モードとランドスケープ モードに基づいてページを変更する必要があるモバイル サイトで作業しています。私はその部分を機能させています。モバイル デバイスが縦向きモードの場合、次のように 4 つのボックスが表示されると想定されます。

[] []
[] []

横向きモードでは、次のようになります。

[] [] [] []

私はこれをほぼ達成しましたが、縦向きと横向きの両方のモードで、左中央に配置されています。私はこのサイトを精査し、同様の質問を見つけましたが、解決策を実装しようとするとうまくいかないようです. それらを中央に配置したいと思います（固定幅の代わりにパーセンテージを使用して、どのモバイルデバイスでも正しく表示されるようにします）。私は CSS にあまり詳しくないので、申し訳ありませんが、以下に私のコードを示します。

/* Landscape mode (default) */
div.my_wrapper{
width: auto;
position:relative;
padding:20px;
}

div.my_innerBox {
    width:100%;
    float:left;
    border: 1px solid green;
}

div.my_left_box{
    float: left;
    margin-right:10px;
    padding: 20px;
    /*margin-left:90px;*/

    width: 16%;
    border: 1px solid gray;
}

div.my_right_box{
    float: left;
    margin-right:10px;
    padding:20px;

    width: 16%;
    border: 1px solid gray;
}

div.my_header{
    padding:10px;
    float:left;
    width: 100%;
    border: 1px solid gray;
    margin-bottom:12px;
}

@media only screen and (orientation:portrait){
/* portrait mode */
div.my_wrapper{
width: inherit;
margin-left:auto;
margin-right:auto;
padding:20px;
}

div.my_innerBox {
    width: 95%;
    display:inline;

}
div.my_left_box{
    float: left;
    padding: 20px 10px;
    /*margin-left:90px;*/
    margin: 0 10px 10px 0;
    width: 30%;
    border: 1px solid gray;
}

div.my_right_box{
    float: left;
    margin: 0 10px 10px 0;
    padding:20px 10px;
    width: 30%;
    border: 1px solid gray;
}

div.my_header{
    padding:10px;
    border: 1px solid gray;
    margin-bottom:12px;
    text-align:left;
    float:left;
}
div.my_desc {
    text-align:left;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    vertical-align:middle;
    position:absolute;
    float:left;
    width:500px;
}
div.my_header_container {
    width:100%;
    float:left;
}
}


<div class="my_header_container">
    <div class="my_header">Title Will Go here
        <div class="my_desc">This is where the description content will    go</div>
    </div>
</div>
<div class="my_wrapper">
    <div class="my_left_box">
        Button 1
    </div>

    <div class="my_right_box">
        Button 2
    </div>
    <div class="my_left_box">
        Button 3
    </div>

    <div class="my_right_box">
        Button 4
    </div>

</div>

また、「ここにコンテンツの説明が入ります」と書かれている場所が「タイトルはここに入る」の右側にあり、垂直方向の中央に配置される必要があります。

どんな助けでも大歓迎です。私はデザイナーではなくプログラマーなので、cssを学ぼうとしています。ありがとうございました。

4

2 に答える 2

0

まず、@mediaクエリの閉じ括弧がありません。

フロートが適用されている場合、何かを中央に配置することは期待できません。

を と に変更し、float:left;を.my_left_box追加.my_right_boxしtext-align:left;ましdisplay:inline-block;た。margin: 0 auto;次にとを追加し、幅を に変更しましtext-align:center;た。私はセクションにこれらの変更を加えていません。.my_wrapper90%(orientation:portrait)

CSSは次のとおりです。

/* Landscape mode (default) */
div.my_wrapper{
width: 90%;
position:relative;
padding:20px;
    margin: 0 auto;
    text-align:center;
}

div.my_innerBox {
    width:100%;
    float:left;
    border: 1px solid green;
}

div.my_left_box{
    margin-right:10px;
    padding: 20px;
    /*margin-left:90px;*/
    display:inline-block;
    width: 16%;
    border: 1px solid gray;
    text-align:left;
}

div.my_right_box{
    margin-right:10px;
    padding:20px;
    display:inline-block;
    width: 16%;
    border: 1px solid gray;
    text-align:left;
}

div.my_header{
    padding:10px;
    float:left;
    width: 100%;
    border: 1px solid gray;
    margin-bottom:12px;
}

@media only screen and (orientation:portrait){
/* portrait mode */
div.my_wrapper{
width: inherit;
margin-left:auto;
margin-right:auto;
padding:20px;
}

div.my_innerBox {
    width: 95%;
    display:inline;

}
div.my_left_box{
    float: left;
    padding: 20px 10px;
    /*margin-left:90px;*/
    margin: 0 10px 10px 0;
    width: 30%;
    border: 1px solid gray;
}

div.my_right_box{
    float: left;
    margin: 0 10px 10px 0;
    padding:20px 10px;
    width: 30%;
    border: 1px solid gray;
}

div.my_header{
    padding:10px;
    border: 1px solid gray;
    margin-bottom:12px;
    text-align:left;
    float:left;
}

} /* Added here but maybe you want it somewhere else. */

div.my_desc {
    text-align:left;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    vertical-align:middle;
    position:absolute;
    float:left;
    width:500px;
}
div.my_header_container {
    width:100%;
    float:left;
}

これがjsfiddleです：http://jsfiddle.net/tspT4/10/

これをモバイルでテストできませんでしたが、動作するはずです

于 2013-06-14T22:50:10.153 に答える