0
  • 24インチのラップトップではレイアウトは問題ありません... 11インチのラップトップで見ると、レイアウトが適切ではありません...右の列が壊れて下に移動します....

http://jsfiddle.net/ZrpLT/92/embedded/result/

以下の私のコードを提供する

<div class="row" style="margin-left: 325px;">
    <div class="span12 pagination-centered" style="font-style: arial; font-size: 21px; color: #cc0000; margin-bottom: 20px; padding-top: 113px;">
            Main Menu
    </div>
    <div class="span5" style="margin-left: 97px; width: 493px;">
        <div class="melonhtml5_gallery">
            <div data-caption="&lt;a style='margin-left: 92px; font-size: 18px; color: grey;' href='http://www.w3schools.com/' &gt;Create&lt;/a&gt; &lt;div&gt; &lt;a style='margin-left: 92px; font-size: 18px; color: grey;' &gt;View/Edit&lt;/a&gt; &lt;/div&gt; &lt;a style='margin-left: 92px; font-size: 18px; color: grey;' &gt;Labels&lt;/a&gt;" data-image="http://www.defie.co/designerImages/inventoryControl.png"></div>
            <div data-caption="&lt;a style='margin-left: 92px; font-size: 18px;' href='http://www.w3schools.com/' &gt;Create&lt;/a&gt; &lt;div&gt; &lt;a style='margin-left: 92px; font-size: 18px;' &gt;View/Edit&lt;/a&gt; &lt;/div&gt; &lt;a style='margin-left: 92px; font-size: 18px;' &gt;Labels&lt;/a&gt;" data-image="http://www.defie.co/designerImages/png/search.png"></div>
            <div data-caption="&lt;a style='margin-left: 92px; font-size: 18px;' href='http://www.w3schools.com/' &gt;Create&lt;/a&gt; &lt;div&gt; &lt;a style='margin-left: 92px; font-size: 18px;' &gt;View/Edit&lt;/a&gt; &lt;/div&gt; &lt;a style='margin-left: 92px; font-size: 18px;' &gt;Labels&lt;/a&gt;" data-image="http://www.defie.co/designerImages/png/yourfiles.png"></div>
            <div data-caption="&lt;a style='margin-left: 92px; font-size: 18px;' href='http://www.w3schools.com/' &gt;Create&lt;/a&gt; &lt;div&gt; &lt;a style='margin-left: 92px; font-size: 18px;' &gt;View/Edit&lt;/a&gt; &lt;/div&gt; &lt;a style='margin-left: 92px; font-size: 18px;' &gt;Labels&lt;/a&gt;" data-image="http://www.defie.co/designerImages/png/shareFiles.png"></div>
            <div data-caption="&lt;a style='margin-left: 92px; font-size: 18px;' href='http://www.w3schools.com/' &gt;Create&lt;/a&gt; &lt;div&gt; &lt;a style='margin-left: 92px; font-size: 18px;' &gt;View/Edit&lt;/a&gt; &lt;/div&gt; &lt;a style='margin-left: 92px; font-size: 18px;' &gt;Labels&lt;/a&gt;" data-image="http://www.defie.co/designerImages/png/custProfile.png"></div>
            <div data-caption="&lt;a style='margin-left: 92px; font-size: 18px;' href='http://www.w3schools.com/' &gt;Create&lt;/a&gt; &lt;div&gt; &lt;a style='margin-left: 92px; font-size: 18px;' &gt;View/Edit&lt;/a&gt; &lt;/div&gt; &lt;a style='margin-left: 92px; font-size: 18px;' &gt;Labels&lt;/a&gt;" data-image="http://www.defie.co/designerImages/png/custQuote.png"></div>
            <div data-caption="&lt;a style='margin-left: 92px; font-size: 18px;' href='http://www.w3schools.com/' &gt;Create&lt;/a&gt; &lt;div&gt; &lt;a style='margin-left: 92px; font-size: 18px;' &gt;View/Edit&lt;/a&gt; &lt;/div&gt; &lt;a style='margin-left: 92px; font-size: 18px;' &gt;Labels&lt;/a&gt;" data-image="http://www.defie.co/designerImages/png/salesOrders.png"></div>
            <div data-caption="&lt;a style='margin-left: 92px; font-size: 18px;' href='http://www.w3schools.com/' &gt;Create&lt;/a&gt; &lt;div&gt; &lt;a style='margin-left: 92px; font-size: 18px;' &gt;View/Edit&lt;/a&gt; &lt;/div&gt; &lt;a style='margin-left: 92px; font-size: 18px;' &gt;Labels&lt;/a&gt;" data-image="http://www.defie.co/designerImages/png/vendorProfile.png"></div>
            <div data-caption="&lt;a style='margin-left: 92px; font-size: 18px;' href='http://www.w3schools.com/' &gt;Create&lt;/a&gt; &lt;div&gt; &lt;a style='margin-left: 92px; font-size: 18px;' &gt;View/Edit&lt;/a&gt; &lt;/div&gt; &lt;a style='margin-left: 92px; font-size: 18px;' &gt;Labels&lt;/a&gt;" data-image="http://www.defie.co/designerImages/png/reports.png"></div>
            <div data-caption="&lt;a style='margin-left: 92px; font-size: 18px;' href='http://www.w3schools.com/' &gt;Create&lt;/a&gt; &lt;div&gt; &lt;a style='margin-left: 92px; font-size: 18px;' &gt;View/Edit&lt;/a&gt; &lt;/div&gt; &lt;a style='margin-left: 92px; font-size: 18px;' &gt;Labels&lt;/a&gt;" data-image="http://www.defie.co/designerImages/png/yourfiles.png"></div>
            <div data-caption="&lt;a style='margin-left: 92px; font-size: 18px;' href='http://www.w3schools.com/' &gt;Create&lt;/a&gt; &lt;div&gt; &lt;a style='margin-left: 92px; font-size: 18px;' &gt;View/Edit&lt;/a&gt; &lt;/div&gt; &lt;a style='margin-left: 92px; font-size: 18px;' &gt;Labels&lt;/a&gt;" data-image="http://www.defie.co/designerImages/png/admin.png"></div>
            <div data-caption="&lt;a style='margin-left: 92px; font-size: 18px;' href='http://www.w3schools.com/' &gt;Create&lt;/a&gt; &lt;div&gt; &lt;a style='margin-left: 92px; font-size: 18px;' &gt;View/Edit&lt;/a&gt; &lt;/div&gt; &lt;a style='margin-left: 92px; font-size: 18px;' &gt;Labels&lt;/a&gt;" data-image="http://www.defie.co/designerImages/png/shipLogistic.png"></div>
            <div data-caption="&lt;a style='margin-left: 92px; font-size: 18px;' href='http://www.w3schools.com/' &gt;Create&lt;/a&gt; &lt;div&gt; &lt;a style='margin-left: 92px; font-size: 18px;' &gt;View/Edit&lt;/a&gt; &lt;/div&gt; &lt;a style='margin-left: 92px; font-size: 18px;' &gt;Labels&lt;/a&gt;" data-image="http://www.defie.co/designerImages/png/accReceivable.png"></div>
            <div data-caption="&lt;a style='margin-left: 92px; font-size: 18px;' href='http://www.w3schools.com/' &gt;Create&lt;/a&gt; &lt;div&gt; &lt;a style='margin-left: 92px; font-size: 18px;' &gt;View/Edit&lt;/a&gt; &lt;/div&gt; &lt;a style='margin-left: 92px; font-size: 18px;' &gt;Labels&lt;/a&gt;" data-image="http://www.defie.co/designerImages/png/custRMA.png"></div>
            <div data-caption="&lt;a style='margin-left: 92px; font-size: 18px;' href='http://www.w3schools.com/' &gt;Create&lt;/a&gt; &lt;div&gt; &lt;a style='margin-left: 92px; font-size: 18px;' &gt;View/Edit&lt;/a&gt; &lt;/div&gt; &lt;a style='margin-left: 92px; font-size: 18px;' &gt;Labels&lt;/a&gt;" data-image="http://www.defie.co/designerImages/png/production.png"></div>
            <div data-caption="&lt;a style='margin-left: 92px; font-size: 18px;' href='http://www.w3schools.com/' &gt;Create&lt;/a&gt; &lt;div&gt; &lt;a style='margin-left: 92px; font-size: 18px;' &gt;View/Edit&lt;/a&gt; &lt;/div&gt; &lt;a style='margin-left: 92px; font-size: 18px;' &gt;Labels&lt;/a&gt;" data-image="http://www.defie.co/designerImages/png/CRM.png"></div>
        </div>
    </div>
    <div class="span5" style="margin-left: 65px; width: 493px;">
        <div class="melonhtml5_gallery">
            <div data-caption="" data-image="http://www.defie.co/designerImages/png/accPayable.png"></div>
            <div data-caption="" data-image="http://www.defie.co/designerImages/png/vendorRMA.png"></div>
            <div data-caption="" data-image="http://www.defie.co/designerImages/png/manuPlanning.png"></div>
            <div data-caption="" data-image="http://www.defie.co/designerImages/png/productLifeCycle.png"></div>
            <div data-caption="" data-image="http://www.defie.co/designerImages/png/multiMedia.png"></div>
            <div data-caption="" data-image="http://www.defie.co/designerImages/png/receiving.png"></div>
            <div data-caption="" data-image="http://www.defie.co/designerImages/png/tax.png"></div>
            <div data-caption="" data-image="http://www.defie.co/designerImages/png/admin.png"></div>
            <div data-caption="" data-image="http://www.defie.co/designerImages/png/ISOprocess.png"></div>
            <div data-caption="" data-image="http://www.defie.co/designerImages/png/intergration.png"></div>
            <div data-caption="" data-image="http://www.defie.co/designerImages/png/comDocuments.png"></div>
            <div data-caption="" data-image="/images/cubes/TBU4.png"></div>
            <div data-caption="" data-image="/images/cubes/TBU5.png"></div>
            <div data-caption="" data-image="/images/cubes/TBU5.png"></div>
            <div data-caption="" data-image="/images/cubes/TBU5.png"></div>
            <div data-caption="" data-image="/images/cubes/TBU5.png"></div>
    </div>
</div>
4

2 に答える 2

0

私は、コンピューター画面、ラップトップ画面、およびモバイル画面で動作する必要があるアプリケーションに取り組んでいます。最善の方法は、サイズをピクセルからパーセンテージに変更することです。パーセンテージでは画面のパーセンテージでサイズを変更し、ピクセルではピクセルをカウントするだけなので、画面が小さい場合、ピクセルの合計サイズが小さくなるため、要素のサイズ変更に苦労しています

たとえば、次のように見てください。

ピクセル:

900 ピクセルの画面の 400 ピクセルは 400 ピクセルに等しい (残り 500 ピクセル)

1200 ピクセルの画面の 400 ピクセルは 400 ピクセルに等しい (残り 800 ピクセル)

パーセンテージ:

800 ピクセルの画面の 25% は 200 ピクセル (正確には画面の 4 分の 1)

1200 ピクセルの画面の 25% は 300 ピクセル (正確には画面の 4 分の 1)

ご理解いただければ幸いです:)

于 2013-01-26T03:57:15.760 に答える
0

このようなレイアウトでレスポンシブな何かをすることを検討したいと思います。masonryのようなプラグインを使用するか、 foundationsのようなレスポンシブ フレームワークを使用します。

于 2013-01-26T04:04:15.713 に答える