CSS窗口宽度调整大小问题

时间:2013-10-12 19:40:50

标签: javascript html css fixed-width

当我在浏览器上调整窗口大小时,我遇到一些内容没有固定到一个地方的问题,我基本上有3个div id框元素放在一起。

它们定位正常但是当我调整屏幕大小时,它们似乎彼此低于它们。

我在CSS的主体中有min-width: 947px;但是这没有做任何事情。

HTML:

<div id ="featured1">

</div>

<div id ="featured3">

</div>  

<div id ="featured2">

</div>

CSS:

#featured1{


float:left;
font-family: 'Lobster13Regular';
font-size:35px;
color:#9c5959;
margin-top:20px;
margin-left:150px;
border:1px solid black;
width:250px;
height:150px;

}

#featured2 {

display: inline-block;
font-family: 'Lobster13Regular';
font-size:35px;
color:#9c5959;
margin-top:20px;
border:1px solid black;
width:250px;
height:150px;
} 

#featured3 {
float:right;
font-family: 'Lobster13Regular';
font-size:35px;
color:#9c5959;
margin-top:20px;

border:1px solid black;
width:250px;
height:150px;
margin-right:200px;

} 

出于某种原因,当我尝试使用此代码调整屏幕大小时,元素会相互低于标题,我正在寻找内容完全保持不变并且根本不调整大小。

2 个答案:

答案 0 :(得分:2)

以下是工作示例:jsFiddle link

使用

display: inline-block;

在所有3 divs上,然后他们不会失败。 注意:此属性不适用于IE7及更小版本。

您的身体已经min-width:947px,但所有divs占据的实际宽度(包括边距和边框等)均为1150px。 这就是它破裂的原因。

请在所有div上添加vertical-align: top;属性

答案 1 :(得分:1)

这应该有所帮助。仅供参考。在CSS中编写时,请确保缩小代码。 Google开发人员对此有一个很好的部分(https://developers.google.com/speed/pagespeed/service/MinifyCSS)。

HTML:

<div id="container">
    <div id="featured1">
        Featured 1
    </div>
    <div id="featured2">
        Featured 2
    </div>
    <div id="featured3">
        Featured 3
    </div>
</div>

CSS:

#container {
    position: absolute;
    width: 836px;
    height: 190px;
    }
#featured1, #featured2, #featured3 {
    position: relative;
    font-family: 'Lobster13Regular';
    font-size:  35px;
    float: left;
    left: 20px;
    top: 20px;
    width: 250px;
    height: 150px;
    border: 1px solid #000;
    overflow: hidden; /*Remove if you are not going to overflow text in each element*/
    }
#featured2, #featured3 {
    margin-left: 20px;
    }