2

私は次のような状況です: 表示がインライン ブロックに設定されているコンテナーがあります。そのため、コンテナの幅はその中のコンテンツによって異なります。

コンテナー内では、左側に 2 つの div がフロートされています。どちらも幅が固定されています。ブラウザー ウィンドウの幅が 2 つの div の幅の合計よりも大きい場合、div は隣り合ってフロートします。

しかし、ここで私の問題が発生します.2つのdivが隣り合わせにならないようにブラウザウィンドウを縮小すると、2番目のフローティングdivが最初のフローティングdivの下に入ります(当然のことながら、私はこれに満足しています) 、ただし、コンテナーの幅は変更されません。2 番目の div がなくなっても、コンテナーはそのスペースを保持します。コンテナーをリンクして、より大きなフローティング div の幅にも縮小します。

どんな助けでも感謝します。どうもありがとう！

.Container {
    position:absolute;
    top:180px;
    width:100%;
    text-align:center;
    background: #DDD;
}
.Container span {
    position:relative;
    margin-top:0px;
    text-align:left;
    display: -moz-inline-stack;
    display:inline-block;
    zoom: 1;
    *display: inline;
    cursor:default;
    background: red;
}
.div1 {
    display:block;
    float:left;
    padding:0;
    width:100px;
    background: coral;
}
.div2 {
    display:block;
    float:left;
    padding:0;
    width:200px;
    background: #45dc2a;
}

HTML

<div class="Container">
    <span>
        <div class="div1"></div>
        <div class="div2"></div>
    </span>
</div>

デモ: http://jsfiddle.net/C4Hcm/

4

3 に答える 3

3

考えられる解決策は次の 2 つです。

1) メディア クエリを使用して、ブラウザーが特定のサイズに達すると css が変更されるようにします。したがって、その時点で 2 番目の div がドロップされると、両方の div がコンテナーを埋めるメディア クエリを追加します。http://css-tricks.com/css-media-queries/

2）ピクセルの代わりにサイズにパーセンテージを使用します-ピクセルを使用すると、divが固定サイズのままになり、パーセンテージを使用すると、divが幅のx％になります。

于 2013-03-26T09:44:03.463 に答える
0

小さなjqueryスクリプトで次のことを試してください

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<style type="text/css">
.container{
background: yellow;
width: 100%;
}
.container .secondContainer {
    text-align:left;
background: blue;
display: inline-block;
max-width: 300px;
}

.div1 {
width:100px;
background: coral;
float: left;
}
.div2 {
width:200px;
background: #45dc2a;
float: left;
}
</style>
<script>

 $(window).resize(function(){
if($(".container").width() >= "300"){
$(".div1,.div2").css("float", "left");
}else{
  $(".div1,.div2").css("float", "none");

}
});
</script>

と体が含まれています

<div class="container">
<div class="secondContainer">
    <div class="div1">This is a text container  </div>
    <div class="div2"> This is a text container This is a text container</div>
</div>

于 2013-03-26T11:50:47.170 に答える
0

これは、コンテナの幅を 100% と指定しているため、使用可能なスペースに対応しようとするために発生します。また、コードの w3 検証を行います。div タグを span タグ内に配置することはできません。

于 2013-03-26T10:01:00.827 に答える