div容器的響應最大寬度

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

您可以使用柔性這樣的：

[編輯]新增至年底的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）

More on stretching vertically here

Answer 2

使用media queries 您可以根據您的屏幕尺寸控制寬度..

http://jsfiddle.net/RACCH/6sod2kb3/

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