div要素を隣り合わせに配置して中央に配置する

Question

5つのdiv要素を隣り合わせに配置して中央に配置しようとしています。しかし、私はそれを動作させることはできません。ここに私のコードは、私が彼らのを持って

<div style="width:200px;margin-right:20px;"> 
    <div class="panel panel-default text-center" style="border: 1px solid #fab05d;border-radius:0px;"> 
    <div class="panel-heading" style="background-color:#fab05d;color:#ffffff !important;border-radius:0px;"> 
     <h1>2017</h1> 
     <p style="line-height: 14pt; margin-top:3px;margin-right:25px;">EARLY BIRD*</p> 
     <p style="clear:both;line-height: 16pt;">GOLD PACKAGE <br>REGISTRATION**</p> 
    </div> 
    <div class="panel-body" style="padding-top:5px;"> 
     <p style="color:#929393;font-size:15px;"><strong>$x.00 TICKET</strong></p> 

     <div style="display:inline-block;margin:auto;padding-top:1px;margin-top:1px;" class="text-center"> 
     <input type="image" src="http://localhost/wordpress/wp-content/uploads/2017/03/gold_remove.png" id="gold_r" style=""> 
     <input type="text" class="text-center" id='goldval' name="quantity" size="5" onchange="gold_change()" style="vertical-align:top;font-weight:bold;border-radius:5px;border:1px solid #929393;"> 
     <input type="image" src="http://localhost" id="gold_a" style=""> 

     </div> 
    </div> 
    </div> 

です。彼らは基本的に同じですが、内容だけが異なります。 5つのdivはすべてコンテナ流体（私はブーツラップを使用しています）の中にあります。 display：inline-blockをコンテナに追加しようとしましたが、動作しません。また、私はfloatを使用しました：を残しましたが、その場合、画面サイズが変わったときに私のdivを正しく整列できません。私は同等の5列を作成することができますが、その場合、私のdivの内容が台無しになるときに、ブートストラップグリッドの拡張バージョンを使用しようとしました。誰も私にすべての画面サイズで動作するいくつかのソリューションを教えてください？ありがとう

Answer 1

これを大画面で試してみてください。これはうまくいくと思います。スニペットの画面は非常に小さいので、それが一緒に整列しません。それはこれはあなたを助けるかもしれない小さな画面サイズ

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div style="width:200px;height:250px;margin-right:20px; border: 1px solid red;" class="col-xs-2"> 
 
    </div> 
 
    <div style="width:200px;height:250px;margin-right:20px; border: 1px solid red;" class="col-xs-2"> 
 
    </div> 
 
    <div style="width:200px;height:250px;margin-right:20px; border: 1px solid red;" class="col-xs-2"> 
 
    </div> 
 
    <div style="width:200px;height:250px;margin-right:20px; border: 1px solid red;" class="col-xs-2"> 
 
    </div> 
 
    <div style="width:200px;height:250px;margin-right:20px; border: 1px solid red;" class="col-xs-2"> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

を収容することができるようにdivのサイズを調整するために使用するメディアクエリー！私が提供するマークアップで5兄弟のdivを見ることができない

.col-xs-2{ 
 
    background:green; 
 
    color:#FFF; 
 
} 
 
.col-half-offset{ 
 
    margin-left:4.166666667% 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class="row" style="border: 1px solid black"> 
 
     <div class="col-xs-2" id="p1">One</div> 
 
     <div class="col-xs-2 col-half-offset" id="p2">Two</div> 
 
     <div class="col-xs-2 col-half-offset" id="p3">Three</div> 
 
     <div class="col-xs-2 col-half-offset" id="p4">Four</div> 
 
     <div class="col-xs-2 col-half-offset" id="p5">Five</div> 
 
     <div>lorem</div> 
 
    </div> 
 
</div>