html - 使元素在div中向右浮动

Question

在我的产品页面上，有许多属性取决于添加到该特定产品的属性。它可以是 1 到 4。属性共享一个公共(public)字段集类名，这对我来说很棘手。基本上我试图并排放置 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 的宽度设置为 100%，它将完成我想要做的事情，但是这两个字段集中间将没有空间。如果我改为设置固定宽度而不是百分比，那么我将在移动/平板电脑 View 中遇到问题。有什么建议吗？

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>