javascript - CSS 窗口宽度调整问题

Question

当我在浏览器上调整窗口大小时，我遇到一些内容没有固定到一个地方的问题，我基本上有 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;

} 

出于某种原因，当我尝试使用此代码调整屏幕大小时，元素彼此下方，我希望内容完全保持不变并且根本不调整大小。

Answer 1

这是工作示例:jsFiddle link

使用

display: inline-block;

在所有 3 个 div 上，它们就不会下降。注意:此属性不适用于 IE7 和更小的版本。

你给你的 body 一个 min-width:947px 但所有 divs 包括边距和边框等实际占用的宽度是 1150px。这就是它崩溃的原因。

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