使子div嵌套浮動父權

Question

事業部結構：

我想使父的內格浮動的權利，無論是家長和孩子的div的寬度。 我需要將刷新按鈕移到父母的右側，在那裏我添加了紅色的顏色框（請參閱Div編輯鏈接）。

Answer 1

也許最好的辦法是在內部div上使用margin-left屬性，以便給出向右浮動的錯覺。

Answer 2

如果我正確地理解了你，你可以這樣做。 編輯：到新的編輯底部！

你父DIV（ID = 「父」） 兒童DIV（ID = 「孩子」）

你需要的CSS和HTML做到這一點。

1. 使您的父母和孩子的div正確嵌套。

<div id="parent"> 
 
    <div id="child"> 
 
    <!-- Whatever goes in your div --> 
 
    </div> 
 
    <div id="child2"> 
 
    <!-- Whatever goes in your div --> 
 
    </div> 
 
</div>

現在你需要創建一個CSS類爲您的父母和孩子div的。

/* this will use the ID of the div, to use a class its .parent and you need to set the class parameter of the div. */ 
 
#parent { 
 
    width: 1000px; 
 
    height: 500px; 
 
    background-color: #333 /* Grey */ 
 
} 
 
#child { 
 
    width: 450px; 
 
    height: 500px; 
 
    float: right; 
 
    background-color: #2e00ff /* Blue */; 
 
} 
 
#child2 { 
 
    width: 450px; 
 
    height: 500px; 
 
    float: left; 
 
    background-color: #ff0000 /* Red */; 
 
}

<div id="parent"> 
 
    <div id="child"> 
 
    <!-- Whatever goes in your div --> 
 
    </div> 
 
    <div id="child2"> 
 
    <!-- Whatever goes in your div --> 
 
    </div> 
 
</div>

希望這有助於！ -InvincibleM

編輯：你應該能夠在div元素中放置任何像按鈕一樣的填充符。

Answer 3

這個月的工作適合你

<div class="flex"> 
    <div class="other-items"> 
     may be large chunks .. 
    </div> 

    <div class="right"> <!-- separate the element and give position --> 
     right 
    </div> 
</div> 

---

.flex { 
    display: flex; 
    position: relative; 
} 

.other-items { 
    width: 98%; 
    /*padding-right: 15px;*/ 
} 

.right { 
    position: absolute; 
    right: 10px; 
    top: 0px; 
} 

Answer 4

您可以使用下面的CSS的方法來得到它 使用一個parent DIV然後一個按鈕parent DIV中，使用float:right到按鈕的父div並使用display:inline-block以單行對齊。

.box { 
 
    width: 100%; 
 
    border: 2px solid; 
 
    padding: 10px; 
 
} 
 

 
.buttonGroup { 
 
    display: inline-block; 
 
    float: right; 
 
    margin-top: 5px; 
 
} 
 

 
.dashboard { 
 
    border: 2px solid; 
 
    padding: 4px; 
 
    display: inline-block; 
 
    text-align: right; 
 
} 
 

 
.refresh { 
 
    border: 2px solid; 
 
    display: inline-block; 
 
    margin-right: 10px; 
 
} 
 

 
.setting { 
 
    border: 2px solid; 
 
    display: inline-block; 
 
}

<div class="box"> 
 
    <div class="dashboard">Dashboard</div> 
 
    <div class="buttonGroup"> 
 
    <div class="refresh">refresh</div> 
 
    <div class="setting">Setting</div> 
 
    </div> 
 
</div>

Answer 5

試試這個：

.parent { 
 
    overflow:hidden; 
 
    background: orange; 
 
} 
 
.child1 { 
 
    height: 200px; 
 
    width: auto; 
 
    background: red; 
 
    float: left; 
 
} 
 

 
.child2 { 
 
    height: 200px; 
 
    width: auto; 
 
    background: blue; 
 
    float: right; 
 
}

<div class="parent"> 
 
    <div class="child1">Child1</div> 
 
    <div class="child2">Child2</div> 
 
</div>