Question

我正在尝试使用标题创建一个页面布局，该标题需要包含两条信息（我已将其放在两个div中）。在更宽的屏幕上，我想将一个块对齐到左侧，一个向右对齐，但在较小的屏幕上，我想要堆叠两个块，并将所有文本居中。

然而，到目前为止，我无法完成这两个目标。如果不诉诸JavaScript，这是否可行？

这是我到目前为止的HTML：

 <div class="container">
    <div class="left">
        Text on the left
    </div>
    <div class="right">
        Text on the right
    </div>

CSS：

.container {
        padding: 0px;
    }
    .left {
        display: inline-block;
        float: left;
        text-align: center;
    }
    .right {
        display: inline-block;
        float: right;
        text-align: center;
    }

我知道float: left和float: right会阻止文字在堆叠时居中，但我不知道如何确保left和{{当未堆叠时，{1}}块会在角落中结束。

Answer 1

提出具体答案有点困难，因为问题并没有表明实际所需的布局，而是在其要求中更为通用。话虽如此，这就是我的建议。

我会在.left和.right DIV上设置宽度，同时使用media queries调整堆叠行为。我有两个例子。

1）

在此示例中，.left和.right都设置为width: 50%。您可以将其更改为40％/ 60％或其他任何内容。这里的主要内容是它们都向左浮动，所以宽度必须等于100％;

<div class="container">
    <div class="left">
        Text on the left.
    </div>
    <div class="right">
        Text on the right.
    </div>
</div>

.container {
    text-align: center;
}    
@media (min-width: 400px) {
    .left,
    .right {
        float: left;
        width: 50%;
    }
}

jsFiddle：http://jsfiddle.net/00ap8rnn/

2）

.container {
    text-align: center;
}
@media (min-width: 400px) {
    .left {
        float: left;
        width: 30%;
    }
    .right {
        float: right;
        width: 15%;
    }
}

在这个例子中，两个DIV宽度不必等于100％，一个浮动到右边，另一个浮动到左边。

jsFiddel：http://jsfiddle.net/00ap8rnn/1/

Answer 2

我会使用媒体查询来更改较小屏幕宽度的CSS。即，您可以将.right div更改为向左浮动而不是更小的屏幕宽度：

@media (max-width: 600px){
    .right{
        float:left;
    }
}

列堆叠时并排列对齐文本

2 个答案:

1）

2）