html - Foundation 5 中的图像布局因未响应式调整大小而中断

Question

总结
如果宽度小于图像宽度，Foundation 5 会处理内容图像(与添加到 div 的背景图像相反)以响应。

我添加了一个具有响应高度的粘性页脚。由于显示的原因，此添加现在阻止 Foundation 5 在页面上最大图像宽度以下的页面上正确显示内容。

意图
修改响应式页脚的 CSS，使其不会干扰 Foundation 5 处理图像的方式。

---

有一个图像打破了我的布局，现在文本的文本不受设备宽度的约束。问题似乎出在将内容包装在一个 div 中，该 div 添加了一个 responsive sticky footer。 .这个类就是需要修改的问题。

.container { 
  display: table; 
  height: 100%; 
  width: 100%; 
  margin: 0 auto; 
} 

此时问题已经存在。包含在其中的 header 很好。但我随后将内容放入如下所示的 div 中

<div class="block push">

这些类对于响应式粘性页脚也是必需的。这些类有这些规则

.block { 
  display: table-row; 
  height: 1px; 
}

.push { 
  height: auto; 
}

这是我的网站正常显示的图像(我注释掉了图像)

但是这里是图片，正如你所看到的，文本延伸到图片的长度

这是我当前的 HTML

<div class="row">
  <div class="large-12 columns">
    <h1>Bruxzir Testimonials</h1>
    <a href="#Submit-Testimonial" title="Submit Your BruxZir Testimonial" class="button">Click Here to Submit Your BruxZir Testimonial</a>
    <ul id="testimonials">  
      <li>
        <p>&quot;This patient's anterior case came out great. I just wanted to share the before and after photos with you. BruxZir keeps surprising us.&quot;</p>
        <p><img src="/assets/img/content/images-bruxzir-zirconia-dental-crown/testimonial-case/before-after.jpg" alt="bruxzir anterior case" /></p>
        <span class="author">&ndash; Janet S., DDS, Oaklawn, IL</span><br />
        <span>Ceramics by <a href="http://www.pcdl-usa.com/" target="_blank">Precision Ceramics Dental Laboratory</a>, Montclair, CA</span>
      </li>
    </ul>  
  </div>
</div>

在 Firefox 的检查器中，我测试了传递给它的规则，它的宽度为 px

但似乎没有将它们计入百分比。

不确定我在这里可能会遗漏什么。我目前在

的演示服务器上有此页面

http://windev.jgallardo.me/pages/testimonials-bruxzir-zirconia-dental-crown/index.aspx

Answer 1

好的，经过一些编辑后，这就是我得到的。如果您删除两个 CSS 规则，您将响应。它们是:

display: table-row css rule on the

div.mainContent {
  display: table-row;
}

和

div.container {
  display: table;
}

删除这两个，然后检查设计如何响应浏览器宽度。