すべてのデバイスで横幅の並んだボックス

私のコンテナ内のすべてのデバイスの寸法と、すべてのデバイスの寸法との間で、同じ幅の100％の横に並べて表示するボックスが必要です。今、以下の作品は、私は後に何を示していますが、このソリューションは、タブレットやスマートフォンなどの実際の物理的なデバイスでは動作しませんが、私は理由を知っていませんが、物理デバイス上に設計されています（私のブラウザだけではなく、ブラウザのサイズを変更してその効果を見ることもできます）。すべてのデバイスで横幅の並んだボックス

.box2 { 
 
    margin: 5px 5px 5px 0; 
 
    text-align: center; 
 
    float: left; 
 
    background-color: #FFF; 
 
    color: #000; 
 
    border: 2px solid #A10000; 
 
    height: auto; 
 
    width: calc((100%/2) - 5px); 
 
    box-sizing: border-box; 
 
    font-size: 12px; 
 
} 
 
.row { 
 
    margin-right: -15px; 
 
    margin-left: -15px; 
 
} 
 
.container { 
 
    padding-right: 15px; 
 
    padding-left: 15px; 
 
    margin-right: auto; 
 
    margin-left: auto; 
 
} 
 

 
@media screen and (min-width: 768px) { 
 
    .box2 { 
 
    width: calc((100%/3) - 5px); 
 
    } 
 
} 
 
@media screen and (min-width: 992px) { 
 
    .box2 { 
 
    width: calc((100%/6) - 5px); 
 
    } 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> 
 
     <a href="#" class="box2 dfs-1-sm" title="1"><h1>1</h1></a> 
 
     <a href="#" class="box2 dfs-2-sm" title="2"><h1>2</h1></a> 
 
     <a href="#" class="box2 dfs-3-sm" title="3"><h1>3</h1></a> 
 
     <a href="#" class="box2 dfs-4-sm" title="4"><h1>4</h1></a> 
 
     <a href="#" class="box2 dfs-5-sm" title="5"><h1>5</h1></a> 
 
     <a href="#" class="box2 dfs-6-sm" title="6"><h1>6</h1></a> 
 
    </div> 
 
    </div> 
 
</div>

出典

2016-10-17 raulbaros

HERESに一つの方法あなたがそれを行うことができますフレックスボックスを使用すると、プラットフォームに依存しないレンダリングが作成され、どこでも使えるようになります。

フレキシボックスのセットアップのための

CSSコード

<!DOCTYPE html> 
 

 
<html> 
 
<head> 
 
    <title></title> 
 
</head> 
 

 
<body> 
 
    <center> 
 
    <div id="flexcanvas"> 
 
     <div id="container" class="flexChild rowParent"> 
 
     <div class="flexChild" id="box1"> 
 
      <h1>Box #1</h1> 
 
     </div> 
 

 
     <div class="flexChild" id="box2"> 
 
      <h1>Box #2</h1> 
 
     </div> 
 

 
     <div class="flexChild" id="box3"> 
 
      <h1>Box #3</h1> 
 
     </div> 
 

 
     <div class="flexChild" id="box4"> 
 
      <h1>Box #4</h1> 
 
     </div> 
 

 
     <div class="flexChild" id="box5"> 
 
      <h1>Box #5</h1> 
 
     </div> 
 

 
     <div class="flexChild" id="box6"> 
 
      <h1>Box #6</h1> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </center> 
 

 

 
<style> 
 
#flexcanvas { 
 
    width: 100%; 
 
    height: 600px !important; 
 
} 
 
.rowParent, 
 
.columnParent { 
 
    display: flex; 
 
    /* wrapping flex boxes causes platform independent arrangement*/ 
 
    
 
    flex-wrap: wrap; 
 
    justify-content: flex-start; 
 
    align-content: stretch; 
 
    align-items: stretch; 
 
    flex-direction: row; 
 
    /* webkit-based browser support */ 
 
    
 
    display: -webkit-flex; 
 
    display: -webkit-box; 
 
    -webkit-box-direction: normal; 
 
    -webkit-box-orient: horizontal; 
 
    -webkit-flex-direction: row; 
 
    -webkit-flex-wrap: wrap; 
 
    -webkit-box-pack: start; 
 
    -webkit-justify-content: flex-start; 
 
    -webkit-align-content: stretch; 
 
    -webkit-box-align: stretch; 
 
    -webkit-align-items: stretch; 
 
    /* MS-based browser support */ 
 
    
 
    display: -ms-flexbox; 
 
    -ms-flex-direction: row; 
 
    -ms-flex-wrap: wrap; 
 
    -ms-flex-pack: start; 
 
    -ms-flex-align: stretch; 
 
    -ms-flex-line-pack: stretch; 
 
} 
 
.columnParent { 
 
    flex-direction: column; 
 
    /* webkit-based browser support */ 
 
    
 
    -webkit-box-orient: vertical; 
 
    -webkit-flex-direction: column; 
 
    /* MS-based browser support */ 
 
    
 
    -ms-flex-direction: column; 
 
} 
 
.flexChild { 
 
    flex: 1; 
 
    align-self: auto; 
 
    padding: 20px; 
 
    border: 1px black solid; 
 
    -webkit-box-flex: 1; 
 
    -webkit-flex: 1; 
 
    -webkit-align-self: auto; 
 
    -ms-flex: 1; 
 
    -ms-flex-item-align: auto; 
 
} 
 

 
</style> 
 
    </body> 
 
</html>

上記のスニペットは、基本的にはどんなに大きいか小さい任意のデバイスを収容しないようにワープして変更できる柔軟なボックスを作成し、おそらく行くには最高の方法です。

デバイス上に表示されるページを表示するには、最新のブラウザの開発ツールで「レスポンシブデザインビュー」オプションを使用してください。

を楽しんでください。

出典

2016-10-17 01:40:43 mike510a

はこのように、flexに、第三のdivです.rowのdiv要素の子、の表示を設定します。

.container > .row > div { 
    display: flex; 
}

出典

2016-10-17 01:38:18 JTrixx16

フレックスCSS属性をサポートしていないと、ほとんどのブラウザで動作しますが、そのようなブラウザでは機能しない可能性があります... – mike510a

-webkit（Chrome）などのブラウザに合わせてプレフィックスを追加するだけです）、-moz（Firefox）、-ms（IE）、-o（Opera） – JTrixx16

すべてのデバイスで横幅の並んだボックス

答えて

関連する問題