Question

假设我有这个代码：

<div class="mother">
    <div class="r">r
    </div>
    <br>
    <div class="l">l
    </div>
    <br>
    <div class="r">r
    </div>
    <br>
    <div class="l">l
    </div>
</div>

和css：

.r {
    display: inline;
}
.l {
    display: inline;
}

我希望所有.r <div>呈现在.mother的右侧以及左侧的所有.l <div>侧。像float: right/left;

这样的东西

但我不想使用float。我想使用智能text-align。

我为text-align; right/left;尝试了.mother，但所有这些都将具有相同的对齐方式，全部保持不变或全部正确。 如何告诉.mother text-align left .l和right .r必须jQuery.parseXML()？

Answer 1

只需删除display:inline - text-align在此无法使用，因为元素的宽度会缩小以适应文本 - 因此无法对齐任何内容。

Codepen demo using `text-align`

.r {
  text-align: right;
}
.l {
  text-align: left;
}

<div class="mother">
  <div class="r">r
  </div>
  <br>
  <div class="l">l
  </div>
  <br>
  <div class="r">r
  </div>
  <br>
  <div class="l">l
  </div>
</div>

执行此操作的另一种方法（没有浮点数或绝对定位）是使用flexbox（注意：只有在 - 出于某种原因 - 上述方法不合适时才应使用此方法）

Codepen demo using `flexbox`

.mother {
  display: flex;
  flex-direction: column;
}
.r {
  align-self: flex-end;
}

<div class="mother">
  <div class="r">r
  </div>
  <br>
  <div class="l">l
  </div>
  <br>
  <div class="r">r
  </div>
  <br>
  <div class="l">l
  </div>
</div>

Answer 2

试试这个

.mother{width:200px}
.r {
    display: table;
    text-align: right;
    width: 100%;
}
.l {
    display: table;
    text-align: left;
    width: 100%;
}

<div class="mother">
    <div class="r">r
    </div>
    <br>
    <div class="l">l
    </div>
    <br>
    <div class="r">r
    </div>
    <br>
    <div class="l">l
    </div>
</div>

Answer 3

你是错的。使用.before r和l，因为它是类。并

<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.4.js"></script>
<script type="text/javascript">
$(document).ready(function () {
    if(window.location.href.indexOf("Desktop") > -1) {
       alert("Alert: Desktop!");
    } else {
        alert("window.location.href: " + window.location.href);
    }
});
</script>
</head>
<body>
    <h1>Test001</h1>
</body>
</html>

float:left和.l float:right。

＆＃13;

.r

＆＃13;

.l {
    float: left;
}
.r, .l {
    display: inline;
}

.r {
    float: right;
}

＆＃13;

<强> Working Fiddle

Answer 4

将显示更改为内联块

.r, .l {
    display: inline-block;
}
.l {
    float: left;
}
.r {
    float: right;
}

并清除div.mother的浮动

.mother:after{
  display: block;
  content: " ";
  clear: both;
  height: 0;
  overflow: hidden;
}

Answer 5

试试这个：

    .r,.l {
        display: inline;
        clear:both;}

    .r {float:right;}
    .l {float:left;}

<div class="mother">
    <div class="r">
    Right
    </div>
    <div class="l">
    Left
    </div>
    <div class="r">
    Right
    </div>
    <div class="l">
    Left
    </div>
</div>

当您向左或向右浮动元素时，它会在另一侧创建一个空白区域，允许其他元素占用剩余空间。 clear属性指定元素浮动元素的哪一侧不允许浮动。

并阅读：What does the CSS rule clear: both do?

如何为单个母块中的不同块定义不同的“文本对齐”？

5 个答案:

Codepen demo using `text-align`

Codepen demo using `flexbox`

如何为单个母块中的不同块定义不同的“文本对齐”？

5 个答案:

Codepen demo using text-align

Codepen demo using flexbox

Codepen demo using `text-align`

Codepen demo using `flexbox`