5

我在一个 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>

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

知道怎么做吗?

4

2 回答 2

17

回答

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

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

cssfloat属性是执行此操作的经典方法,可以追溯到史前时代,因此它基本上支持所有浏览器。唯一需要注意的是 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属性影响它所应用的元素的子元素。

于 2013-04-03T20:06:24.967 回答
2

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

于 2013-04-03T19:34:06.767 回答