3つのdivが最大の幅を占めるようにする

Question

フォームの入力データを含むdivがいくつかあります。それらの1つは、その中にいくつかのプレースホルダーのようなテキストを持つ選択です。私は選択ボックスがテキストと同じ幅になるようにしたいので、他のdivもこの幅を使いたいと思っています。ここで

はhtmlです：

.form-group{ 
    display: inline-block; 
} 
.row{ 
    width: 100% 
    float: left; 
    margin-left: 5%; 
} 

選択ドロップダウンが他のフォーム族元素のいずれよりも広くなっている今：

<div class="row"> 
    <div class="form-group"> 
     <label for="category_type">Category Type:</label> 

     <select name="category_type" id="category_type_list" class="form-control" onchange="updateCategoriesOnSelect(event);"> 
      <option value="" disabled selected>If there is a matching type for the category, please select it</option> 

      <option value="1">A</option> 
      <option value="2">B</option> 
      <option value="3">C</option> 
     </select> 
    </div> 
</div> 
<div class="row"> 
    <div class="form-group"> 
     <label for="name">Name:</label> 
     <input name="name" class="form-control"/> 
    </div> 
</div> 

<div class="row"> 
    <div class="form-group"> 
     <label for="description">Description:</label> 
     <input name="description" class="form-control"/> 
    </div> 
</div> 

、ここでは、CSSがあります。すべてのフォームグループ要素を同じ幅にして、選択したすべてのテキストを表示できるだけの幅を必要とするのは可能ですか？

Hereは、例のフィドルです。

編集：私は幅を使用したくありません：フォームグループの100％と私は本当にすべてのフォームグループの幅を設定しないことをお勧めします。私はそれが選択のテキストのために十分広いことが必要な最小幅を取ることを望むでしょう。

Answer 1

テーブルレイアウトのテーブル：固定で問題を解決できます。 `フォームgroup` 100％`： は

https://jsfiddle.net/9r62L7Lh/5/

.form-group{ 
     display: block; 
} 
.row{ 
    width: 100% 
} 
table { 
    margin-left: 5%; 
    table-layout: fixed; 
} 
input { 
    width: 100%; 
} 

Answer 2

選択ドロップダウン幅は自動的にテキスト幅に調整されます。あなたが入力幅は、あなたが

何か.form-control{width: 250px;}

Fiddleのようにそれらのすべてに固定値を設定する必要があります選択の幅と同じようなことがしたい場合は、.form-control{width: 100%;}

を設定しているので

Answer 3

jQueryのeach()の機能を使用して各elの幅を取得することができますement。

var max = 0; 
 

 
$('.form-control').each(function(i) { 
 
    if(max < $(this).width()) { 
 
    max = $(this).width(); 
 
    } 
 
}); 
 

 
$('.form-control').css('width', max);

.form-group{ 
 
    display: inline-block; 
 
} 
 
.row{ 
 
    width: 100% 
 
    float: left; 
 
    margin-left: 5%; 
 
} 
 
.content { 
 
    padding: 20px 40px; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="content"> 
 
    
 
<div class="row"> 
 
    <div class="form-group"> 
 
     <label for="category_type">Category Type:</label> 
 

 
     <select name="category_type" id="category_type_list" class="form-control" onchange="updateCategoriesOnSelect(event);"> 
 
      <option value="" disabled selected>If there is a matching type for the category, please select it</option> 
 

 
      <option value="1">A</option> 
 
      <option value="2">B</option> 
 
      <option value="3">C</option> 
 
     </select> 
 
    </div> 
 
</div> 
 
<div class="row"> 
 
    <div class="form-group"> 
 
     <label for="name">Name:</label> 
 
     <input name="name" class="form-control"/> 
 
    </div> 
 
</div> 
 

 
<div class="row"> 
 
    <div class="form-group"> 
 
     <label for="description">Description:</label> 
 
     <input name="description" class="form-control"/> 
 
    </div> 
 
</div> 
 
</div> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

・ホープ、このことができます：以下のスニペットを見て！