使子嵌套Div在父级右侧浮动

Question

Div formtions：

我想在父母的内部div浮动，不管父母和子女的宽度如何。 我需要将“刷新”按钮移动到“父”的右侧，我在其中添加了红色框（请参阅Div格式链接）。

Answer 1

可能最好的方法是在内部div上使用margin-left属性，以便给出向右浮动的错觉。

Answer 2

如果我理解正确，这就是你能做的。 编辑：转到底部进行新修改！

你的父div（id =“parent”） 儿童div（id =“孩子”）

你需要CSS和HTML才能做到这一点。

1. 使您的父母和子女正确嵌套。

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

1. 现在你需要为你的父和子div创建一个css类。

/* 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以单行对齐。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 5

试试这个：

＆＃13;

＆＃13;

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;