css - 定位 <p> 未正确对齐

标签 css responsive

CSS 新手。似乎无法正确对齐这些段落!这适用于 lg、md、sm 屏幕尺寸的响应式页面。当屏幕尺寸改变时,蓝色框会偏离几个像素并四处移动。为什么它们不能在绿色框内完美对齐?蓝框和绿框都是ps的。

代码笔: http://codepen.io/pleiovn/pen/RaBqgY

    #p-text {
    background-color: #a1ab5f;
    padding: 10px;
    text-align: left;
    clear: both;
    width: 90%;
    height: 300px;
    margin: 10px;
}

#p-head {
    background-color: #5fa1ab;
    padding: 10px;
    text-align: right;
    position: absolute;
    top: 0px;
    right: 0px;
    width: 33%;
    height: 50px;
    margin: 10px;
}

最佳答案

那是因为你的媒体查询写错了

这个

@media (min-width: 991px) and (max-width: 768px)

应该是

@media (max-width: 991px) and (min-width: 768px)

关于css - 定位 <p> 未正确对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36814453/

相关文章:

javascript - jQuery include html - 将类添加到标题

html - 无论浏览器的分辨率如何,CSS-Background 都集中

html - 响应式菜单问题

css - flex 菜单,换行后整行的第一个元素

html - 响应式图像 - Bootstrap

html - 如何使每个 <div> 在 rowspan <tr> 中以相等的间距对齐?

html - 文本字段和按钮不会在 Chrome 中保持内联

html - 响应位置粘性

css - 图像上缩进的透明箭头/三 Angular 形

html - 使用纯 HTML 在电子邮件中并排创建响应式图像