Question

我在主容器的div中有两个div。第一个div得到固定宽度/ 160px /并浮动到左边，第二个div只包含应该向右对齐的按钮，所以我设置浮动到右边。主div占整个页面宽度的25％，我在我的应用程序中使用bootstrap。

一切正常，直到paret div的widh小到适合两个div，所以右边的一个移动到左边 - 但是在某种程度上如何对齐/居中/第二div？因此，当两个div在行中单独存在时，它们应该与父级的中心对齐，但是当它们在同一行时，第一个应该对齐到左边，第二个应该对齐到右边或者可能到可用空间/父div的中心widh减去160px的第一个div /.

非常感谢任何建议，彼得

编辑：容器样式：width:25%;

first / left / div style：float:left; widht:160px;

秒/右/ div样式：margin-top:5px;

Answer 1

以下是演示如何操作的示例。

#container
{
  width: 25%;
  background: red;
  overflow: hidden;
}
#left
{
  width: 160px;
  height: 5em;
  background: green;
  float: left;
}
#right
{
  float: right;
  height: 5em;
  background: blue;
}
@media (max-width: 872px)
{
  #right
  {
    float: none;
    clear: both;
    text-align: center;
  }
}

<div id='container'>
  <div id='left'>
  
  </div>
  <div id='right'>
    <button>
      Button
    </button>
  </div>
</div>

您应该使用@media查询，并将断点设置为视口大小，其中两个div不能放在同一行上。
然后在该媒体查询中将正确的div设置为

float: none;
clear: both;
text-align: center;

提示：查看完整分页的代码段结果，然后调整窗口大小以查看效果。

浮动div的对齐方式

1 个答案: