在任何窗口大小中保持布局相同答案

【问题标题】：Keeping Layout Same in any Window Size在任何窗口大小中保持布局相同
【发布时间】：2014-08-31 11:04:08
【问题描述】：

我正在使用 css 作为布局在 html 中制作网站。但是，请注意页面在全窗口中看起来与在半窗口中看起来确实不同。我已经尝试过使用位置、溢出、浮动和所有这些，但它似乎没有帮助？

这是我的html：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="type/html;
charset=ANSI"/>
<link rel="stylesheet" type="text/css" href="C:\Users\Hidden\Desktop\Website Main\Webpages\Main Style Sheet.css"
</head>
<body>
<div class="container">
   <div class="column-center">

<img id="flag" src=" C:\Users\Hidden\Desktop\Website Main\Images\Flag.jpg" align="left"> <hr/>

    <hr/>
 </div>
   <div class="column-left"> </div>
   <div class="column-right"> </div>
</div>
</body>
</html>

这是css：

HTML {height: 98%;}
body {
background-color: #614051;
 padding-right: 5px;
    padding-left: 5px;
overflow: hidden;
height: 100%
}
.container{
background-color: #fdf3e7;
border: 2px solid silver;
margin: 5px;
width: 98%;
height: 100%;
margin-left: auto ;
  margin-right: auto ;
}
.column-left{ 
float: left; 
width: 24%;
background-color: #edc9af;
height: 100%;
}
.column-right{ 
float: right; 
width: 24%;
background-color: #edc9af;
height: 100%; 
}
.column-center{ 

display: inline-block; 
width: 575px; 
overflow: visible;
height: 100%
text-align: center;
margin-left: auto ;
  margin-right: auto ;
}
hr {
    border: 0;
    height: 1px;
    background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
    background-image:    -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
    background-image:     -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
    background-image:      -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
}
#flag {
margin: 5px;
width: 300px;
height: 200px;
}

如何使它在大窗口面板和小窗口面板中显示相同？提前致谢！

【问题讨论】：

如果我理解正确，您是在问如何使您的网站具有响应性？有很多方法可以实现这一点..查看 css 媒体查询，还有可以使用的框架（即基础、引导程序）..
顺便说一句，在您的简单示例中，您有一些固定宽度的元素（#flag、.column-center 等），如果您将它们全部更改为使用 %，您可能会得到更多不太流畅的布局。

标签： css layout window

【解决方案1】：

请尝试将您的.column-center 宽度更改为：50%。

您不能拥有具有响应大小的左右列和具有固定大小的主列，并且可以在所有屏幕大小上正常工作。

【讨论】：