Question

我使用Foundation 5完成了我自己公司的网站，并且在我开始添加从数据库中提取的产品组合和定价部分之前，它在移动电话上正确显示。当我取消这些部分时，一切都正确居中。我正在iphone 6 plus上进行测试。任何帮助，将不胜感激。

以下是链接：http://www.overtheoceanfilms.com/beta/index.php

Answer 1

看起来定价表的嵌套是导致问题的原因。

您当前的定价表结构如下所示：

row //row 1
--medium-3 //pricing table
--row //row 2
----medium-3 //pricing table
--row 
row

每个定价表的直接兄弟是包含定价表的row。这会在右侧产生额外的空白区域。

您想要的结构应该是：

row
--medium-3
--medium-3
--medium-3
--medium-3
row

每个定价表存在于单个row中：

html结构应如下所示：

<div class="row">
  <div class="large-3 columns">
    <ul class="pricing-table">
      <li class="title-Silver ">Silver Package
      </li>
      <li class="price"> $1600 </li>

      <li class="bullet-item"> 2 videographers </li>
      <li class="bullet-item"> Full Ceremony </li>
      <li class="bullet-item"> Full Reception </li>
      <li class="bullet-item"> 1 full length DVD with custom case </li>
      <li class="bullet-item"> Professional audio recording </li>

      <input type="hidden" value="Silver" name="Silver">
      <li class="cta-button"><a class="button" href="#">Contact Us!</a></li>
    </ul>
  </div>
  <div class="large-3 columns">
    <ul class="pricing-table">
      <li class="title-Gold ">Gold Package
      </li>
      <li class="price"> $2250 </li>

      <li class="bullet-item"> 2 Videographers </li>
      <li class="bullet-item"> Bride &amp; Groom Morning Preperation </li>
      <li class="bullet-item"> Full Ceremony &amp; Reception </li>
      <li class="bullet-item"> Filming of photoshoot </li>
      <li class="bullet-item"> Highlight Video </li>
      <li class="bullet-item"> 3 custom made DVD's </li>
      <li class="bullet-item"> Professional audio recording </li>

      <input type="hidden" value="Gold" name="Gold">
      <li class="cta-button"><a class="button" href="#">Contact Us!</a></li>
    </ul>
  </div>

  <div class="large-3 columns">
    <ul class="pricing-table">
      <li class="title-Diamond ">Diamond
        <span style="position:absolute; margin-left:-80px; top:-27px;">  <img src="images/BestValue.png" style="height:60px; width:60px"> </span> Package
      </li>
      <li class="price"> $2500 </li>

      <li class="bullet-item"> Includes Gold Package </li>
      <li class="bullet-item"> Stabilization Add-On </li>
      <li class="bullet-item"> Free 2 LED lights with stands during reception dancing </li>

      <input type="hidden" value="Diamond" name="Diamond">
      <li class="cta-button"><a class="button" href="#">Contact Us!</a></li>
    </ul>
  </div>

  <div class="large-3 columns">
    <ul class="pricing-table">
      <li class="title-Platinum ">Platinum Package
      </li>
      <li class="price"> $3000 </li>

      <li class="bullet-item"> Includes Diamond Package </li>
      <li class="bullet-item"> 3 videographers </li>
      <li class="bullet-item"> Interview with couple </li>
      <li class="bullet-item"> First look reveal (if applicable) </li>
      <li class="bullet-item"> Wish Cam during reception </li>

      <input type="hidden" value="Platinum" name="Platinum">
      <li class="cta-button"><a class="button" href="#">Contact Us!</a></li>
    </ul>
  </div>
</div>

您可以使用上述内容替换定价表以解决问题。如果您仍然遇到问题，请发表评论。

在移动设备上查看时，如何在页面右侧出现白色间隙？

1 个答案: