CSS 不会永久改变

Question

模糊的问题，但我也不知道问谷歌的正确问题。

我有一个小部件，其背景 img 位于我页面的列中。但是当我调整页面大小时，我的小部件将被破坏，从而无法横向滚动页面。背景图像也被切断。

另外:如何让我的页面适应不同的屏幕尺寸？有没有办法让我的小部件固定在一个地方？谁能指出我正确的方向？

谢谢

.example_wrapper
{
    margin: 10px 20% 10px 20%;
    border-style: solid;
    border-width: 0px;
    height: 315px;

    border-radius: 20px;      
}

.example_container
{
    margin: 10px 0px 10px 3%;
    align: center;
    border-radius: 0px;
    height: 300px;
    overflow:auto;      
    background-image: url('img.png');
    background-repeat: no-repeat;
    background-position: center;
}

.example_textarea
{
    position: absolute;
    margin: 145px 30% 0 5%;
    align: left;
    overflow: hidden;
    height: 130px;


}

.twitter_block
{
   position: left;
   margin: 6px;
   height: 120px;
   width: 120px;
   align: left;
   float: left;


}



.twitter_pic
{
    position: center;
    margin: 1px 20% auto 20%;

}

.scale-image
{
height:73px;
width: 73px;


}

.twitter_link
{
position: none;
margin: 0px 100px auto 30px;
}

.twitter_half
{
margin: 0px;


}

.twitter_profile_pos
{
text-align: center;
margin: 0px 10px auto 17px;
font-weight: bold;

}

.twitter_profile_pos a
{
color: #043E6B;

}

Answer 1

这可能是某种清算问题，也可能与您的持仓规则有关。

position:none、position:left 和 position:center 不是有效规则。所以这些对解决任何定位问题没有帮助。

如果 position:relative 未应用于父元素，

position:absolute 可能会破坏您的布局(否则它定位元素 relative整个文档，而不是特定元素)。这可能导致调整大小时中断。

如果您可以发布相应的 HTML，那么每个人都应该能够重新创建它。或者更好的是，如果您在 jsfiddle 上发布代码并将链接放在这里，我们可以帮助更快地解决问题!!