0

ブラウザーでウィンドウのサイズを変更すると、一部のコンテンツが 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;

}

何らかの理由で、このコードで画面のサイズを変更しようとすると、要素が互いに下に落ちます。コンテンツが完全に同じままで、サイズがまったく変更されないことを探しています。

4

2 に答える 2

2

これが実際の例です: jsFiddle リンク

使用する

display: inline-block;

3 つすべてdivsで、ダウンすることはありません。注: このプロパティは IE7 以下のバージョンでは機能しません。

ボディに a を指定しましたが、余白や境界線などを含むmin-width:947pxすべてが占める実際の幅は です。それが壊れている理由です。divs1150px

vertical-align: top;すべての div にプロパティを追加してください

于 2013-10-12T20:06:04.300 に答える
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;
    }
于 2013-10-13T03:48:02.273 に答える