Question

我有一些标签，如果两个div没有放在一行，我想让它们响应（最大浏览器宽度）。

<div>
  <div class="card" style="cursor:pointer;">
    <img class="card-img-top" src="" width=100 alt="logo" />
    <div class="card-block">
      <h4 class="card-title">Test1</h4>
      <p class="card-text">
        Status: <span class="label label-success">Active</span>
      </p>
      <p class="card-text">Created: 2017-05-12</p>
      <a href="javascript:void(0);" class="btn btn-primary">Edit</a>
    </div>
  </div>
  <div class="card" style="cursor:pointer;">
    <img class="card-img-top" src="" width=100 alt="logo" />
    <div class="card-block">
      <h4 class="card-title">Test sdf ;ljkgwe;o k5l4j ;l2k54k j9rjg </h4>
      <p class="card-text">
        Status: <span class="label label-success">Active</span>
      </p>
      <p class="card-text">Created: 2017-05-12</p>
      <a href="javascript:void(0);" class="btn btn-primary">Edit</a>
    </div>
  </div>
  <div class="card" style="cursor:pointer;">
    <img class="card-img-top" src="" width=100 alt="logo" />
    <div class="card-block">
      <h4 class="card-title">Test deg sdkjf glkjsdhg lkjdshfglk jhdsfkg dfg </h4>
      <p class="card-text">
        Status: <span class="label label-success">Active</span>
      </p>
      <p class="card-text">Created: 2017-05-13</p>
      <a href="javascript:void(0);" class="btn btn-primary">Edit</a>
    </div>
  </div>
</div>

http://jsfiddle.net/m1L6pfwm/182/ 所以除了https://gyazo.com/f5ae57b4969fd55a43e276eaf9429be7之外，在我的JSFiddle示例中一切正常 - 在这种情况下，div的宽度应为100％。换句话说，我不会在每个div的右侧看到巨大的白色间隙。可能吗？请指教。

Answer 1

使用validate 您可以根据屏幕尺寸控制宽度..

media queries

@media  (max-width: 700px) {
  .card {
    width:98%;
  }
}
@media  (min-width: 701px) {
  .card {
    width:48%;
  }
}

Answer 2

您可以像这样使用flex：

[edit]将其添加到CSS的末尾：

@media  (max-width: 700px) {
  .card { flex: 0 0 1; float:none;}
  .card-block {float:left;}
}

http://jsfiddle.net/m1L6pfwm/184/

要填充高度，请尝试：

@media  (max-width: 700px) {
  .card { flex: 0 0 1; float:none; flex-direction: column;}
  .card-block {float:left;}
}

http://jsfiddle.net/m1L6pfwm/185/

（抱歉看起来它也在扩展内容而不是周围的div）

div容器的响应最大宽度

2 个答案: