2

私はちょうどすべてのことをするのをやめ始めて、divとfloatsで遊んでいます。

上に2列、下に1列必要なホームページがあります。 大画面

ユーザーが携帯電話のように小さな画面を持っている場合、例として各行にすべてのボックスを配置する必要があります。 ここに画像の説明を入力してください

これを行う正しい方法は何ですか？これはコードを示しています：http：//jsfiddle.net/boje/cMF4P/1/

これは、ホームページが現在行っていることです。 ここに画像の説明を入力してください

コードの一部

/* =====  form2  ===== */
fieldset.fieldsetLeft {
    width:47%;
    float:left;
    padding: 10px;
    margin-bottom: 15px;
}
fieldset.fieldsetRight {
    width: 45%;
    float:right;
    padding: 10px;
    margin-bottom: 15px;
}
.clearBoth {
    clear: both;
}
4

2 に答える 2

1

スマートフォンとタブレットの場合、通常のcssスタイルシートをオーバーロードする専用のcssファイルを作成できます。

ヘッダー.html：

<link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="smart_tablet.css" type="text/css" />

次に、smart_tablet.cssに具体的なものを再定義します。

fieldset.fieldsetLeft {
    width:100%;
    float: none;
}
fieldset.fieldsetRight {
    width: 100%;
    float: none;
}
于 2013-02-02T16:22:15.673 に答える
1

コードでは、右のボックスでfloatrightをfloatleftに変更でき、意図したとおりに機能します。

http://jsfiddle.net/PzAsJ/

fieldset.fieldsetRight {
    width: 45%;
    float:left;
    padding: 10px;
    margin-bottom: 15px;
}

ただし、css3メディアクエリを見てください。はるかに多くの可能性があります。

于 2013-02-02T16:24:02.097 に答える