css - 在同一个div中以不同方式对齐两个元素

Question

我在一个 div 中有多个元素。

我想将一个元素对齐为“text-align: right”，将另一个元素对齐为“text-align: left”

检查下面的代码:

<div class="image_meaning" style="display: none; background-color: white; height: 35px; margin-left: 1px;">
    <input type="checkbox" id="points" value="Temporal Filter" style="text-align: left; "/>
    <label for="tempral_filter" style="text-align: left; ">Points</label>

    <img style="text-align: right;" src="{{ STATIC_URL }}img/cross.png"/>-abc
    <img style="text-align: right;" src="{{ STATIC_URL }}img/blue_triangle.png"/>-cde
</div>

但是当我运行代码时，它会将两个元素都放在左侧。

知道怎么做吗？

Answer 1

回答

有几种方法可以解决您的问题，最常见的方法是使用 css float 属性(截至 2016 年)。更现代的方法是使用 flexbox 或网格。

使用flexbox的解决方案

您可以使用 display: flex 来做到这一点。

Flexbox 只有 supported by newer browsers ，如果IE(9及以下)是你的 friend 请远离此方法。

示例 html:

<div class="wrapper">
    <div class="block"></div>
    <div class="block"></div>
</div>

示例 CSS:

.wrapper { display: flex; }
.block { width: 50%; }

Live demo .

使用网格的解决方案

您可以使用新的 display: grid 来做到这一点。

网格布局只有supported by the most modern browsers (2017 年 9 月)，如果您在 evergreen browsers 上构建那就太好了，如果不使用 flex。

示例 html:

<div class="wrapper">
    <div class="block"></div>
    <div class="block"></div>
</div>

示例 CSS:

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

Live demo .

使用float的解决方案

css float 属性是执行此操作的经典方法，可以追溯到史前时代，因此它基本上支持所有浏览器。唯一需要注意的是 clearfix 问题(见下文)。

示例 html:

<div class="wrapper">
    <div class="block-left"></div>
    <div class="block-right"></div>
</div>

示例 CSS:

.block-left { float: left; }
.block-right { float: right; }

请注意， float 元素会导致其父元素在涉及到它们的高度时忽略它们。如果这是一个问题(通常是)，您可以使用 clearfix hack解决这个问题。

你可以这样定义它:

.cf:before,
.cf:after {
  content: " ";
  display: table;
}

.cf:after { clear: both; }

然后在你的父元素上:

<div class="wrapper cf">

这将允许父级正确接收 float 元素的高度。

阅读更多关于 what is the clearfix hack 的信息.

Live demo .

---

其他解决方案

使用inline-block的解决方案

您也可以使用 inline-block 属性将您的元素并排放置。

请注意，inline-block 选项需要考虑 block 之间 html 中的空白。为了解决这个问题，要么像下面那样删除空格，添加负边距，要么将父级上的 font-size 定义为 0。

示例 html:

<div class="wrapper">
    <div class="block"></div><div class="block"></div>
</div>

示例 CSS:

.block { display: inline-block; }

/* Optional zero font for wrapper
   Then reset blocks to normal font-size */
.wrapper { font-size: 0; }
.block { font-size: 16px; }

/* Optional negative margin if you can't
   remove space manually in the html.
   Note that the number is per use case. */
.block { margin-left: -.25em; }

Live demo .

使用position: absolute的解决方案

另一种方法是使用相对容器绝对定位元素。在构建响应式布局等时，此方法的灵 active 不如其他方法。

示例 html:

<div class="wrapper">
    <div class="block block-left"></div>
    <div class="block block-right"></div>
</div>

示例 CSS:

.wrapper { position: relative; }
.block { position: absolute; }

.block-left { left: 0; }
.block-right { right: 0; }

Live demo .

---

为什么您的解决方案不起作用

您正在使用 text-align CSS 属性，它会影响内联元素和文本，但它不能像使用 float 那样用于移动元素属性(property)。

text-align 属性会影响应用它的元素的子元素。