响应式环绕对齐

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;}
}

响应式环绕对齐

Responsive wrapping alignment

html

css

alignment

word-wrap