響應包裝排列

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