0

我的网站的 iPad 版本没有内联。图像似乎位于文本下方，当您缩小计算机上的网站窗口时也是如此。

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

你在 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 回答
0

听起来您试图动态调整照片大小，同时保持左侧文本始终固定，同时保持最小 960 像素宽度？CSS 仍然很难准确地完成你想要的。我同意 refhat 的观点，即您应该研究 CSS 媒体查询以在 iPad 和较小的显示器上正确显示网页。

不管怎样，这里有一些代码供您考虑。我对 html 和 css 代码都采取了一些重大的自由。而且...我使用了css表。

HTML 和 CSS 代码沙箱

于 2012-10-18T18:04:17.577 回答