0

私の Web サイトの iPad バージョンはインラインに収まりません。画像はテキストの下にあるように見えます。コンピューターで Web サイトのウィンドウを縮小した場合も同様です。

http://www.lauradawaf.co.uk/daisy-whitney-make-up-artist#

これを止める方法はありますか？

HTML

<div id="content" class="clearfix">

<div class="leftCol noborder">Daisy Whitney</div>
<div class="clearfix"></div>
<div class="leftCol">Testing where this shows up. Testing where this shows up. Testing where this shows up. Testing where this shows up.</div>

<ul id="projectBreakdown" class="rightCol gallery clearfix">
<li class="large"><img src="http://www.lauradawaf.co.uk/wp-content/uploads/2012/10/test.jpg" style="display: inline-block" ></li>
<li class="large"><img src="http://www.lauradawaf.co.uk/wp-content/uploads/2012/10/test.jpg" style="display: inline-block" ></li>
</ul>

</div>

CSS

/* Individual Projects
------------------------------------------------------------ */  
#content {
    position: relative;
    min-width: 960px;
}

.clearfix:after {
    clear: both;
    content: " ";
    display: block;
    height: 0;
    visibility: hidden;
    font-size: 0;
}

.leftCol {
    position: relative;
    float: left;
    width: 220px;
    margin-right: 20px;
    padding-top: 15px;
}

.leftCol.noborder {
    border-top: none;
    padding-top: 3px;
}

#projectBreakdown {
float: left;
list-style: none;
width: 100%;
max-width: 960px;
min-width: 720px;
padding: 5px 0 30px 0;
}

.rightCol {
position: relative;
}

#projectBreakdown li.large, #projectBreakdown li.large img {
width: 100%;
max-width: 940px;
min-width: 700px;
}

#projectBreakdown li {
float: left;
margin: 0 20px 20px 0;
}
4

2 に答える 2

0

最小 960 ピクセルの幅を維持しながら、左側のテキストを固定したまま、写真のサイズを動的に変更しようとしているように聞こえますか? CSS は、あなたが望むものを正確に達成するのにまだ苦労しています。iPad や小さいディスプレイで Web ページを適切に表示するには、CSS メディア クエリを調べる必要があるという refhat に同意します。

とにかく、考慮すべきコードがいくつかあります。html と css の両方のコードを大幅に変更しました。そして... CSSテーブルを使用しました。

HTML および CSS コード サンドボックス

于 2012-10-18T18:04:17.577 に答える
0

iPadで作業するためにこれを何をしていますか？iPad 用の特定の CSS はありません。ビュー ポートのメタ タグもありません。

次のメタ タグを追加します。

<meta name="viewport" content="width=device-width; initial-scale=1.0; minimum-scale=1.0; maximum-scale=1.0;" />

次に、メディア クエリを使用してデバイス固有の CSS を記述します。

于 2012-10-18T17:13:13.230 に答える