我正在尝试创建带有标题的页面布局,该标题需要包含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: left
和float: right
是阻止文本在堆叠时居中的原因,但是我不知道如何确保left
和right
块在叠放时出现在角落不堆叠。 最佳答案
我会使用媒体查询来更改较小屏幕宽度的CSS。即,您可以将.right div更改为向左浮动,而不是较小的屏幕宽度:
@media (max-width: 600px){
.right{
float:left;
}
}
关于css - 列堆叠和并排堆叠时,文本对齐方式不同,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/32771195/