ブラウザーでウィンドウのサイズを変更すると、一部のコンテンツが 1 つの場所に固定されないという問題が発生します。基本的に、3 つdiv id
のボックス要素が隣り合って配置されています。
それらはうまく配置されていますが、画面のサイズを変更すると、互いに下に落ちているように見えます。
私はmin-width: 947px;
CSSの本体にありますが、これは何もしません。
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;
}
何らかの理由で、このコードで画面のサイズを変更しようとすると、要素が互いに下に落ちます。コンテンツが完全に同じままで、サイズがまったく変更されないことを探しています。