使元素在div內右移

在我的產品頁面上，根據添加到特定產品的數量，有許多屬性。它可以從1到4.這些屬性共享一個通用的字段集類名稱，這對我來說很棘手。基本上，我試圖將兩個fieldsets並排放置，其餘的放在它們下面（也並排放置）。但是，我也希望他們分開，並在容器內堅持各自的立場。我已經成功地完成了我上面提到的部分內容，但是我有一個問題需要將正確的字段集完全粘貼到右側。這裏有一個形象的描述：使元素在div內右移

這裏的至今代碼：

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的無線網絡dth到100％，它會完成我正在嘗試做的事情，但這兩個fieldset在中間沒有空間。如果我改爲設置固定寬度而不是百分比，那麼我將在移動/平板電腦視圖中遇到問題。有什麼建議麼？

來源

2017-06-18 Mark Hedberg

嘗試此。如果你想對齊項目和浮動權利。

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

來源

2017-06-18 19:27:06

這足以添加一個**奇數選擇器**來完成我正在嘗試做的事情，但現在div類「attribute_label」存在一個小問題。它漂浮在右邊，但不是與fieldset對齊，而是與容器div對齊。見呃漢的小提琴：https://jsfiddle.net/er_han/Lprh9zqf/有什麼建議嗎？ –

這是我更新了我的答案。你有沒有檢查我的答案。 –

如果我這樣做，原來的問題回來了：https://i.stack.imgur.com/S4kW5.png –

問題是fieldset中的元素全部浮動到左側。

添加這對的奇數字段集內部元件漂浮到右：

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

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

來源

2017-06-18 18:44:40

是啊，謝謝！這個伎倆。 –

使元素在div內右移

回答

相關問題