显示：弹性和无响应的照片 HTML + CSS答案

【问题标题】：display: flex and unresponsive photos HTML + CSS显示：弹性和无响应的照片 HTML + CSS
【发布时间】：2018-05-23 17:26:28
【问题描述】：

我有文章和图片部分：

<div class="section">
    <div class="container" style="display: flex;">
        <% @posts.take(4).each do |post| %>
          <div class="carda" >
            <div class="card-content">
              <%= link_to image_tag post.image.url, style: 'height: 250px; width: 400px;'%>
              <p class="title" style="margin-top: 5px; color:black">
      <%= raw link_to post.title, post  %>
              </p>
            </div>
          </div>
      <% end %>
    </div>
</div>

我的响应有问题：

我不知道我是否正确地为文章做这部分，我不知道如何使它们在移动设备上响应

【问题讨论】：

stackoverflow.com/help/how-to-ask
'height: 250px; width: 400px;' 这是你的问题。使用类，然后使用 CSS 设置类的样式。使用display: flex，而不是固定宽度或高度。阅读 flexbox，这就是你想要使用的。

标签： html css flexbox frontend

【解决方案1】：

如果您想要响应式行为，则图像不得具有固定宽度。你最好把宽度：100%；到您想要的图像和高度。无论如何，为了获得更好的响应，您必须将所有涉及的代码放在这种情况下 html 和 css 中。 :)

【讨论】：