在同一个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或grid.

解决方案使用 flexbox

你可以display: flex用来做这件事.

Flexbox仅受较新浏览器支持,如果IE(9及以下)是您的朋友,请远离此方法.

示例html:

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

示例css:

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

现场演示.

解决方案使用 grid

您可以使用new display: grid来执行此操作.

网格布局仅受最现代化浏览器的支持(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;
}

现场演示.

解决方案使用 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">

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

阅读更多关于什么是clearfix hack的信息.

现场演示.

其他方案

解决方案使用 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; }

现场演示.

解决方案使用 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; }

现场演示.

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

您正在使用text-align将影响内联元素和文本的css属性,但它不能像使用float属性那样用于移动元素.

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

Answer 2

使用float: leftandfloat: right代替text-align