响应包装对齐

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