横に並んでいるdivを横に並べる方法は？

私は3つのdivをサイドバイサイドで表示し、親divの幅（ウィンドウの100％に設定されている）内に均等に分散させる必要があります。それをする最善の方法は何ですか？横に並んでいるdivを横に並べる方法は？

以下の例は、3つのdivを浮動させるだけです（私は必要なものではなく、左側に1つずつ配置します）。

PS：オプションのリストは動的です。つまり、解決策が理想的に考慮する必要があるように、3つ以上のdivがある可能性があります。ありがとう！ :)

PS 2：私はブートストラップを使用していますので、ブートストラップを使用してこれを行う良い方法があれば、私はそれだけです。

.row { 
 
    width: 100%; 
 
    background-color: #DDD; 
 
} 
 

 
.option { 
 
    border: 1px solid #BBB; 
 
    float: left; 
 
    padding: 10px; 
 
}

<div class="row"> 
 

 
    <div class="option"> 
 
     Box A 
 
    </div> 
 
    <div class="option"> 
 
     Box B 
 
    </div> 
 
    <div class="option"> 
 
     Box C 
 
    </div> 
 

 
</div>

出典

2016-06-27 wdanda

** 100％/ 3箱= 33％** ... CSS>オプションは、幅 '追加：33％' ..基本 – KingRider

あなたはフィドルhttps://jsfiddle.net/Lddyn573/5/

.row { 
    width: 100%; 
    display: flex; 
    justify-content: space-around; 
    background-color: #DDD; 
} 

.option { 
    border: 1px solid #BBB; 
    padding: 10px; 
}

出典

2016-06-27 19:46:34

これは素晴らしいです、ありがとう。さて、おそらくBox Aが左端（ちょうどちょっとした詰め物）で始まり、中央のBox B、右端のBox C（やはり少し詰め物）で始めることは可能でしょうか？言い換えれば、要素間の間隔を制御/増加させることは可能でしょうか？ – wdanda

ブートストラップを使用している場合は、そのようなカスタムCSS imhoを避ける必要があります。それは何のためのブートストラップが作られたのか... – dhh

@wdandaはい代わりに 'space-between'を使うことができます。私は、例としてhttps://jsfiddle.net/Lddyn573/6/のために10pxのパディングを追加しました –

あなたは、ブートストラップGrid layoutを利用することができます：

.option { 
 
    border: 1px solid #BBB; 
 
}

<?php 
 
// whatever $items contains... 
 
$items = []; 
 

 
$columnWidth = floor(12/count($items)) ?: 1; 
 
?> 
 

 
<div class="row"> 
 

 
    <div class="option col-md-<?php echo $columnWidth;?>"> 
 
     Box A 
 
    </div> 
 
    <div class="option col-md-<?php echo $columnWidth;?>"> 
 
     Box B 
 
    </div> 
 
    <div class="option col-md-<?php echo $columnWidth;?>"> 
 
     Box C 
 
    </div> 
 

 
</div>

ブートストラップCSSが含まれている場合.row CSSが必要とするべきではありません。

ただし、その計算は最大12個の項目（行の最大数、ブートストラップのサポート数）でのみ機能し、項目数が除数の場合は全幅の行になります12（例えば、1,2,3,4,6,12）である。

出典

2016-06-27 19:45:29 dhh

私この問題は、私が4列、5列、または6列を持っている可能性があり、同じ行に表示する必要がある（つまり、ブレークできない）ことです。だから私はカウントを知っている必要があり、-4（3要素のために働く）を他のものに調整することを意味する（つまり、4要素などの-3） – wdanda

あなたは列サイズを計算するためにPHPを使うことができます。私は例を追加します。 – dhh

ちょうどCSS3のフレキシボックスの賛辞を使用する参照、フレックス使用することができます。親要素に十分なスペースがある限り、追加の子を追加することができ、自動的に隣に表示されます。親が空き領域を使い果たすと、子要素のサイズを変更してお互いの隣に表示する必要があることに注意してください。 W3Schoolsのから以下の例を参照してください： -

.flex-container { 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    width: 400px; 
 
    height: 250px; 
 
    background-color: lightgrey; 
 
} 
 

 
.flex-item { 
 
    background-color: cornflowerblue; 
 
    width: 100px; 
 
    height: 100px; 
 
    margin: 10px; 
 
}

<body> 
 

 
<div class="flex-container"> 
 
    <div class="flex-item">flex item 1</div> 
 
    <div class="flex-item">flex item 2</div> 
 
    <div class="flex-item">flex item 3</div> 
 
</div> 
 

 
</body>

出典

2016-06-27 19:55:03 coderrick

横に並んでいるdivを横に並べる方法は？

答えて

関連する問題