Question

我的网站的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;
}

Answer 1

你在ipad上做什么工作？ ipad没有特定的CSS。视口端元元标记也丢失了：

添加此元标记：

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

然后使用媒体查询编写特定于设备的CSS。

Answer 2

听起来你试图动态调整照片大小，同时保持左边的文字一直保持最小960px的宽度？ CSS仍然无法完成你想要的东西。我同意你应该研究一下CSS媒体查询，以便在iPad和小型显示器上正确显示网页。

无论如何，这里有一些代码供您考虑。我用html和css代码获得了一些主要的自由。而且......我使用了css表。

HTML and CSS code sandbox

iPad版网站没有内嵌

2 个答案: