修复div在任何屏幕分辨率下的对齐方式
修复div在任何屏幕分辨率下的对齐方式
提问于 2016-02-12 05:06:08
下面是HTML代码
.Box {
position: absolute;
bottom: 60px;
right: 0px;
left: 65px;
display: block;
background-color: #fedd2d;
max-width: 60%;
padding: 15px;
opacity: 0.8;
}<div class="Box">
<div class="Boxtitle">Hello</div>
<div class="Boxsubtitle">Subtitle</div>
</div>
当我以较大的分辨率(2560*1440)查看此框时，它会同时展开右侧和左侧。我尝试使用width属性，它从右侧固定框，但是固定的宽度阻碍了响应性，并且框的宽度不会随着文本的长度而改变。如何使用CSS或Javascript使Box div在任何屏幕大小下保持在相同的位置，并使其根据其中内容的长度进行响应？
回答 2
Stack Overflow用户
发布于 2016-02-12 05:17:43
只需要删除right和max-width，然后宽度将根据内容进行调整。
.Box {
position: absolute;
bottom: 60px;
left: 65px;
display: block;
background-color: #fedd2d;
padding: 15px;
opacity: 0.8;
}Stack Overflow用户
发布于 2016-02-12 05:20:15
right:0;似乎成了拦路虎。它会把容器一直拉到右边，但是也设置了max-width，所以它会在宽度的60%停止。你们的规则在一起并不连贯。
因为是绝对的，所以实际上不需要显示。
除非我理解错了最大宽度挡住了我。不然呢？
.Box {
position: absolute;
bottom: 60px;
left: 65px;
background-color: #fedd2d;
max-width: 60%;
padding: 15px;
opacity: 0.8;
}<div class="Box">
<div class="Boxtitle">Hello</div>
<div class="Boxsubtitle">Subtitle</div>
</div>
`
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/35350018
复制相关文章
相似问题
腾讯云开发者
