1

私は自分のウェブサイトのコンテンツに 2 つの異なる列を用意したいと考えています。

http://i.stack.imgur.com/V4uX2.jpg

パソコンのモニターではこのように表示されますが、モバイルでは次のように表示されます。

http://i.stack.imgur.com/H7CNe.png

ご覧のとおり、私のモバイルのように上下ではなく、常に 2 つの側面が隣り合っていることを望みます。

CSS

#leftSide {
margin-top:80px;
margin-left:200px;
float:left;
width:400px;
}

#rightSide {
margin-top:80px;
margin-left:10px;
float:left;
width:400px;
}

HTML:

<div id="leftSide">
</div>
<div id="rightSide">
</div>
4

2 に答える 2

1

携帯の解像度を確認してください。画面の幅が 800px 未満で、コンテンツを表示するには 800px 以上が必要な場合があります。

また、2 列表示の場合は、2 つの div で左右に float を使用するのが最善の方法です。デバイスの幅に基づいて div の幅をスタイル設定できるレスポンシブ CSS について読む必要があります。

于 2013-11-06T20:03:48.773 に答える
0

あなたはいくつかのものを使うことができます...表示ブロックインライン機能またはあなたはただ絵を右に浮かべることができます。または、テーブルを使用することもできますが、個人的には嫌いです。

    #sidebar {
    margin-top:80px;
    float:right;
    width:400px;
    margin-left: 5%;

幅の合計が親コンテナの幅を超えないようにしてください。また、画像の右側にパディングが必要な場合もあります。

于 2013-11-06T20:07:39.557 に答える