Question

虽然桌面网站运行正常，但手机上的移动网站也会发生变形。右列中的文本大于左侧。（以下两页）

http://www.beijosevents.com/galleries/

http://www.beijosevents.com/shopbeijos/

HTML：

    <div class="aligncenter"><!-- WEDDINGS HEADER START -->
    <img src="http://www.beijosevents.com/wp-content/uploads/2014/07/weddings.png" alt=“weddings” height="80" />
    <!--WEDDINGS GALLERY START-->
    <div class="gal"><a href="http://www.beijosevents.com/jen-mark/"><img class="fade" src="http://www.beijosevents.com/wp-content/uploads/2015/01/wedding-jen-mark.jpg" alt=“jenmarkwedding” width="300" height="200" /></a>
jen + mark
david medal</div>
    <div class="gal"></div>
    <div><a href="http://www.beijosevents.com/jessica-mike/"><img class="fade" src="http://www.beijosevents.com/wp-content/uploads/2014/10/1-cover2.jpeg" alt=“jessicamikewedding” width="300" height="200" /></a>
jessica + mike
jaqueline pilar</div>
    <!-- WEDDINGS GALLERY END-->
    </div>

CSS：

    #gallerypagewidth{width:700px;margin:auto;}
    .gal{float:left;clear:both;}

Answer 1

我不知道是什么原因导致文本大小增加，因为窗口大小减小了......但是将右边的div浮动会解决问题。你也有一些可能不需要的空div。

你可以这样试试，HTML：

<div class="gal first">
    <a href="http://www.beijosevents.com/shine-crazy-diamond/">
        <img class="fade" src="http://www.beijosevents.com/wp-content/uploads/2015/01/styled-shoots-shine-on.jpg" alt="“shineonyoucrazydiamond”" width="300" height="200">
    </a><br>
    shine on you crazy diamond<br>
    megan welker
</div>
<div class="gal">
    <a href="http://www.beijosevents.com/bhldn-secret-garden-shoot/">
        <img class="fade" src="http://www.beijosevents.com/wp-content/uploads/2014/10/1-cover1.jpg" alt="“bhldnautumnwedding”" width="300" height="200">
    </a><br>
    BHLDN secret garden wedding<br>
    megan welker
</div>
<div class="clear"></div>
...

CSS：

.gal {
    float: left;
    margin-left: 50px;
}
.first {
    margin-left: 0;
}
.clear {
    clear: both;
}

我的移动网站文字已被扭曲

1 个答案: