CSSで％widthを使ってdivを5等分に分割する方法

divの "tile-container"を幅100％で5等分したいと思います。 25％の幅で内側に5つのdivを作成すると問題は解決すると思ったが、そうはしなかった。コンテナは小さいようです。ここに私のコードは次のとおりです。CSSで％widthを使ってdivを5等分に分割する方法

<head> 
    <link type="text/css" rel="stylesheet" href="stylesheet.css"/> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
</head> 
<body> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-md-10 col-md-offset-1"> 
       <div class="tile-container"> 
        <div class="tile"></div> 
        <div class="tile"></div> 
        <div class="tile"></div> 
        <div class="tile"></div> 
        <div class="tile"></div>   
       </div> 
      </div> 
     </div> 
    </div> 
</body>

そしてstylsheet.cssファイル：

.tile-container{ 
    position: relative; 
    border: solid #BDBDBD 2px; 
    margin: 5px 0px; 
    width:100%; 
    } 

.tile{ 
    width: 20%; 
    min-height:22px; 
    border: 1px #BDBDBD solid; 
    display: inline-block; 
}

出典

2017-09-03 Mark

（1）私はあなたがあなたの問題の20％ない25％を意味推測 - あなたはあなたの中の20％を持っていますCSS。（2）なぜ幅2の柱にしないのですか？すでにグリッドシステムを使用しています。（3）働くスニペットが私たちが助けることができるように、私たちが問題の行動を示すのを助けるでしょう – FluffyKitten

問題は、あなたが.tile-containerにfont-size:0を追加できるスペースを無視し、divタグの間にHTMLでの間隔でありますその後、.tileに特定font-sizeを使用します。

.tile-container{ 
 
    position: relative; 
 
    border: solid #BDBDBD 2px; 
 
    margin: 5px 0px; 
 
    width:100%; 
 
    font-size:0; /* add */ 
 
} 
 

 
.tile{ 
 
    font-size:20px; /* or whatever you want */ 
 
    width: 20%; 
 
    min-height:22px; 
 
    border: 1px #BDBDBD solid; 
 
    display: inline-block; 
 
}

<head> 
 
    <link type="text/css" rel="stylesheet" href="stylesheet.css"/> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
</head> 
 
<body> 
 
    <div class="container"> 
 
     <div class="row"> 
 
      <div class="col-md-10 col-md-offset-1"> 
 
       <div class="tile-container"> 
 
        <div class="tile">A</div> 
 
        <div class="tile">B</div> 
 
        <div class="tile">C</div> 
 
        <div class="tile">D</div> 
 
        <div class="tile">E</div>   
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</body>

もう一つの方法は、スペースをコメントアウトし、次のようになります。

.tile-container{ 
 
    position: relative; 
 
    border: solid #BDBDBD 2px; 
 
    margin: 5px 0px; 
 
    width:100%; 
 
} 
 

 
.tile{ 
 
    width: 20%; 
 
    min-height:22px; 
 
    border: 1px #BDBDBD solid; 
 
    display: inline-block; 
 
}

<head> 
 
    <link type="text/css" rel="stylesheet" href="stylesheet.css"/> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
</head> 
 
<body> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="col-md-10 col-md-offset-1"> 
 
     <div class="tile-container"> 
 
      <div class="tile">A</div><!-- 
 
     --><div class="tile">B</div><!-- 
 
     --><div class="tile">C</div><!-- 
 
     --><div class="tile">D</div><!-- 
 
     --><div class="tile">E</div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</body>

出典

2017-09-03 19:41:15

それは働いた！ font-size：0pxはdiv間のスペースを取り除く普遍的な方法ですか？ – Mark

私はこの用語がクロスブラウザであると思います。はい、そうです。 –

CSSで％widthを使ってdivを5等分に分割する方法

答えて

関連する問題