div内の要素を右側に浮かせる

Question

私の製品ページには、その特定の製品に追加された数に応じていくつかの属性があります。 1から4までの値を取ることができます。属性は共通のフィールドセットクラス名を共有しています。これは私にとって厄介なところです。基本的には、フィールドセットの2つを並べて配置し、残りのフィールドセットを並べて配置しようとしています。しかし、私はまた、それらを分離し、コンテナ内のそれぞれの側面に固執したい。私は上に述べたことの一部を成し遂げることに成功しましたが、正しいフィールドセットを完全に正しいものにすることに問題があります。ここで ​​

これまでのコードは次のとおりです：ここに画像の説明です

https://jsfiddle.net/26za63sh/

HTML：

<div class="container"> 
    <div class="product_attributes clearfix"> 
    <div id="attributes"> 
     <div class="clearfix"></div> 
     <fieldset class="attribute_fieldset"> 
     <label class="attribute_label" for="group_2">Choose</label> 
     <div class="attribute_list"> 
      <select name="group_2" id="group_2" class="form-control attribute_select no-print"> 
      <option value="81" selected="selected" title="Option #1">Option #1</option> 
      <option value="150" title="Option #2">Option #2</option> 
      </select> 
     </div> 
     </fieldset> 
     <fieldset class="attribute_fieldset"> 
     <label class="attribute_label" for="group_6">Choose</label> 
     <div class="attribute_list"> 
      <select name="group_6" id="group_6" class="form-control attribute_select no-print"> 
      <option value="31" selected="selected" title="Option #1">Option #1</option> 
      <option value="56" title="Option #2">Option #2</option> 
      </select> 
     </div> 
     </fieldset> 
     <fieldset class="attribute_fieldset"> 
     <label class="attribute_label" for="group_5">Choose</label> 
     <div class="attribute_list"> 
      <select name="group_5" id="group_5" class="form-control attribute_select no-print"> 
      <option value="80" selected="selected" title="Option #1">Option #1</option> 
      <option value="151" title="Option #2">Option #2</option> 
      </select> 
     </div> 
     </fieldset> 
    </div> 
    </div> 
</div> 

CSS：私は、私が設定している場合ことを理解

.container { 
    width: 400px; 
    height: 200px; 
    background-color: gray; 
    border: 1px solid #dddddd; 
} 

fieldset { 
    padding: 0; 
    margin: 0; 
    border: 0; 
} 

#attributes .attribute_list { 
    width: 90%; 
} 

#attributes fieldset { 
    float: left; 
    width: 50%; 
    padding-bottom: 5px; 
} 

#attributes fieldset:last-child { 
    float: left; 
    padding-bottom: 0px; 
} 

.attribute_listのwi 〜100％それは私がしようとしているものを達成するが、2つのフィールドセットは中間にスペースを持たないだろう。代わりに固定幅をパーセンテージではなく設定すると、モバイル/タブレットで問題が発生します。助言がありますか？

Answer 1

はこれを試してみてくださいを。アイテムを一列に整列させて右に浮かせる必要がある場合。

.attribute-container{display:inline-block;} 
 
.attribute_fieldset:nth-child(odd) .attribute-container{float:right;} 
 
.container { 
 
    width: 400px; 
 
    height: 200px; 
 
    background-color: gray; 
 
    border: 1px solid #dddddd; 
 
} 
 

 
fieldset { 
 
    padding: 0; 
 
    margin: 0; 
 
    border: 0; 
 
} 
 

 
#attributes .attribute_list { 
 
    width: 90%; 
 
} 
 

 
#attributes fieldset { 
 
    float: left; 
 
    width: 50%; 
 
    padding-bottom: 5px; 
 
} 
 

 
#attributes fieldset:last-child { 
 
    float: left; 
 
    padding-bottom: 0px; 
 
}

<div class="container"> 
 
    <div class="product_attributes clearfix"> 
 
    <div id="attributes"> 
 
     <div class="clearfix"></div> 
 
     <fieldset class="attribute_fieldset"> 
 
     <div class="attribute-container"> 
 
     
 
     
 
     <label class="attribute_label" for="group_2">Choose 1</label> 
 
     <div class="attribute_list"> 
 
      <select name="group_2" id="group_2" class="form-control attribute_select no-print"> 
 
      <option value="81" selected="selected" title="Option #1">Option #1</option> 
 
      <option value="150" title="Option #2">Option #2</option> 
 
      </select> 
 
     </div> 
 
     </div> 
 
     </fieldset> 
 
     <fieldset class="attribute_fieldset"> 
 
     <div class="attribute-container"> 
 
     
 
     
 
     <label class="attribute_label" for="group_6">Choose 2</label> 
 
     <div class="attribute_list"> 
 
      <select name="group_6" id="group_6" class="form-control attribute_select no-print"> 
 
      <option value="31" selected="selected" title="Option #1">Option #1</option> 
 
      <option value="56" title="Option #2">Option #2</option> 
 
      </select> 
 
     </div> 
 
     </div> 
 
     </fieldset> 
 
     <fieldset class="attribute_fieldset"> 
 
     <div class="attribute-container"> 
 
     
 
     
 
     <label class="attribute_label" for="group_5">Choose 3</label> 
 
     <div class="attribute_list"> 
 
      <select name="group_5" id="group_5" class="form-control attribute_select no-print"> 
 
      <option value="80" selected="selected" title="Option #1">Option #1</option> 
 
      <option value="151" title="Option #2">Option #2</option> 
 
      </select> 
 
     </div> 
 
     </div> 
 
     </fieldset> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

問題は、fieldsetのすべての要素が浮動小数点になります。

奇数フィールドセット右への内側の要素をfloatにこれを追加します。

#attributes fieldset:nth-child(odd) * { 
    float: right; 
} 

JSFiddle：https://jsfiddle.net/er_han/Lprh9zqf/