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的宽度设置为100％，它将完成我尝试做的事情，但这两个字段集中间没有空格。如果我改为设置固定宽度而不是百分比，那么我在移动/平板电脑视图中会出现问题。有什么建议吗？

Answer 1

问题是fieldset中的元素都向左浮动。

添加此项以将奇数字段集的内部元素浮动到右侧：

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

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

Answer 2

试试这个。如果你想在线上对齐项目并向右浮动。

.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>

使一个元素在div内向右浮动

2 个答案: