我正在尝试创建带有标题的页面布局,该标题需要包含2条信息(我将其放置在两个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: leftfloat: right是阻止文本在堆叠时居中的原因,但是我不知道如何确保leftright块在叠放时出现在角落不堆叠。

最佳答案

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

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

关于css - 列堆叠和并排堆叠时,文本对齐方式不同,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/32771195/

10-11 14:03
查看更多