在同一个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及以下）是您的朋友，请远离此方法。

示例html：

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

示例css：

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

Live demo

使用grid

的解决方案

您可以使用新的display: grid来执行此操作。

网格布局仅为supported by the most modern browsers（2017年9月），如果您正在使用前沿技术，那么很好，如果不使用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; }

请注意浮动元素会导致父母在身高时忽略它们。如果这是一个问题（通常是这样），您可以使用clearfix hack来解决这种情况。

您可以这样定义：

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

.cf:after { clear: both; }

然后在你的父元素上：

<div class="wrapper cf">

这将允许父级正确接收浮动元素高度。

详细了解what is the clearfix hack。

Live demo

---

其他解决方案

使用inline-block

的解决方案

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

请注意，inline-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

的解决方案

另一种方法是使用相对容器绝对定位元素。在构建响应式布局等方面时，此方法的灵活性略低于其他方法。

示例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属性那样使用它来移动元素。

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

Answer 2

使用float: left和float: right代替text-align