响应式包装对齐

Question

我希望使用 CSS 实现以下效果：

Browser is wide enough to fit text:    | left text             right text |
Browser isn't wide enough to fit text: |    left text    |
                                       |   right text    |

当浏览器的宽度足以容纳文本（未换行）时，左侧文本向左对齐，右侧文本向右对齐。当浏览器变得小于左侧文本和右侧文本的宽度时（通常会强制文本换行），我希望右侧文本移动到左侧文本下方，并使它们都居中。这是否仅适用于媒体查询？

我尝试将display: table 应用于父 div，然后将display: table-cell 放在左右文本元素上，但最终得到以下结果：

| left   right | (text has wrapped on it's own side)
| text    text |

Answer 1

你可以使用媒体查询

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


/*You set break point according to your requirement*/

@media only screen and (max-width: 768px) {
.left-text {float: none; text-align:center;}
.right-text {float: none;  text-align:center;}
}