代码之家 › 专栏 › 技术社区 › David

使用display:flex时将div向右对齐

flexbox css html

David · 技术社区 · 8 年前

display: flex 适用于所有分区。

但这禁止我使用 float:right 在右侧分区。

<div style="border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: gray;height:30px;">
  <div style="float:left;line-height:30px;">Contact Details</div>
  <button type="button" class="edit_button" style="float: right;">My Button</button>
</div>

这是小提琴: http://jsfiddle.net/xQgSm/

2 回复 | 直到 8 年前

Michael Benjamin William Falcon 8 年前

.container {
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: gray;
  height: 30px;
  display: flex;
  align-items: center; /* center vertically */
  justify-content: space-between; /* maximum space between items*/
}

<div class="container">
  <div>Contact Details</div>

  <button type="button" class="edit_button">My Button</button>

</div>

.container {
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: gray;
  height: 30px;
  display: flex;
  align-items: center;
}

.edit_button {
  margin-left: auto;
  /* align to right */
}

<div class=“容器”>
<div>联系方式</div>

<按钮类型=“button”class=“edit_button”>我的按钮(</按钮(>);

kyun 8 年前

<div style="display:flex;justify-content:space-between;border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: gray;height:30px;">
   <div style="float:left;line-height:30px;">Contact Details</div>

    <button type="button" class="edit_button" style="">My Button</button>

</div>https://stackoverflow.com/questions/45881495/align-div-to-the-right-while-using-displayflex#

justify-content:space-between

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Jamie · 在CSS链接的文件名中添加Jinja占位符

1 年前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

1 年前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

1 年前

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

1 年前

wqyutv · 当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

1 年前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

1 年前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

1 年前