调整了如何使用浏览器停止移动页面元素的大小

Question

我知道很多人都遇到了和我一样的困难，我试图将他们的修复程序应用到我的代码中但到目前为止没有运气。希望你能帮助我。

当我的浏览器设置为宽屏时，我的屏幕允许页面元素都处于完美位置。但是，一旦浏览器大小发生变化，元素就会移动。访问我的网站，亲自了解我的意思 - www.shedbecalifornia.com

如何阻止这种情况发生，以便无论浏览器/屏幕大小如何，元素都会保留在原位？

我不知道我的代码需要哪些部分 - 我发现的答案都与不同的问题和略有不同的代码有关。对不起，我不能更具体，但我想你会知道你在寻找什么。

提前非常感谢。

Wrappers
******************************************/
.ct-wrapper {    padding:0px 20px;    position:relative;    max-width:1260px;    margin:       0 auto;  }

.outer-wrapper {    background: transparent;    position: relative;  margin: 40px 0;   }

.header-wrapper {
background: #1b1e24;
display: block;
float: left;
width: 100%;
}

.main-wrapper {
width: 72.05%;
float: left;
background:#fff;
padding:25px;
}

#content {   
position: relative;  
width: 100%;  

}

.sidebar-wrapper {
width: 25.15%;
padding: 0;
float: right;
margin: 0;
}

Answer 1

假设你的意思是文章片段在中间？

您可以将CSS宽度更改为百分比，如下所示：

.article_list_image {
    float: left;
    margin-right: 25px;
    margin-bottom: 25px;
    width: 35%;
}

.article_list_content {
    float: right;
    width: 61%;
}

这是一个快速修复程序，可以停止图像

下的描述

Answer 2

默认情况下，修复元素的宽度是一种更好的方法，并在@media查询中使用百分比（％），这使得块响应。 响应式图像的小黑客：

img {
   max-width: 100%;
   height: auto;
   width: auto\9; /* ie8 */
}