2

私はHTMLを持っています

<div class="Box">
    <img width=100% src="...">
</div>
<table class="tab1">
    ...
</table>

表示される画面のサイズに応じて、これら 2 つの要素の位置を変更したいと考えています。携帯電話や低解像度のプロジェクターなどの狭い画面では、テーブルを div の下の中央に表示したいと考えています。親要素の全幅を占めるように div をスケーリングします。しかし、ワイドスクリーンでは、テーブルを div の横に表示し、そのうちの 2 つが親要素の全幅を占有するようにします。

純粋なCSSでこれを行うことは可能ですか?

4

2 に答える 2

2

その問題には、CSS3 @media を使用してみることができます。

.Box
{
    width: 100%;
}


/* overwrite, if smartphone */
@media screen and (max-width: 480px) 
{
    .Box, .tab1
    {
        width: 50%;
    }
}

代わりに、メディア タイプのハンドヘルドを試すことができます。

@media handheld 
{
    .Box, .tab1
    {
        width: 50%;
    }
}

次の場所にあります: http://www.w3schools.com/css/css_mediatypes.asp

于 2013-06-07T20:25:52.820 に答える
2

レスポンシブ Web デザインが必要です。これを行う方法に関する良い記事は次のとおりです。http://alistapart.com/article/responsive-web-design

于 2013-06-07T20:01:50.293 に答える