親div内で子divを展開して圧縮する

Question

ページのトップバーを設定しています。ブラウザを大きくしたり小さくしたりすると、各ボタンの幅を広げたり圧縮したりしたいと考えています。

浮動小数点を使った非常に良い解決策を見ましたが、私の場合は、これを追加するとボタンが横並びに表示されなくなるため、これは機能しません。私はインラインブロックで解決したものです。

ボタンを横に並べて、ブラウザウィンドウで幅を調整する方法が必要です。助言がありますか？次のように私のコードは次のとおりです。

#topbar { 
 
    width: 100%; 
 
    height: 38px; 
 
    border-bottom: 1px solid #e2c4ff; 
 
    position: fixed; 
 
    z-index: 10; 
 
    top: 0px; 
 
    left: 0px; 
 
    text-align: center; 
 
} 
 

 
.toppage { 
 
    white-space: nowrap; 
 
    position: absolute; 
 
    left: 0%; 
 
    top: 50%; 
 
    transform: translate(0%, -50%); 
 
} 
 

 
.contain { 
 
    display: inline-block; 
 
    white-space: normal; 
 
    padding-left: 12px; 
 
    padding-right: 12px; 
 
    height: 38px; 
 
    background-color: #fff; 
 
    border-right: 1px solid #e2c4ff; 
 
}

<div id="topbar"> 
 
    <div class="toppage"> 
 
    <div class="contain">hello</div> 
 
    <div class="contain">goodbye</div> 
 
    <div class="contain">what are we doing?</div> 
 
    <!----> 
 
    <div class="contain">what are we doing?</div> 
 
    <div class="contain">what are we doing?</div> 
 
    <div class="contain">what are we doing?</div> 
 
    <div class="contain">what are we doing?</div> 
 
    <div class="contain">what are we doing?</div> 
 
    <div class="contain">what are we doing?</div> 
 
    <div class="contain">what are we doing?</div> 
 
    <div class="contain">what are we doing?</div> 
 
    <div class="contain">what are we doing?</div> 
 
    <div class="contain">what are we doing?</div> 
 
    <div class="contain">what are we doing?</div> 
 
    <div class="contain">what are we doing?</div> 
 
    </div> 
 
</div>

Answer 1

.toppageためposition: absoluteを使用しないでください。 .containの場合は、幅でパーセンテージを使用してください。それは動作するはずです。

Answer 2

私はこれに落ち着きました：http://www.w3schools.com/css/css_navbar.asp。私が思っていたことはまったくやっていませんが、それは非常にきれいに見え、コードは元々持っていたよりも綺麗です。

Answer 3

.toppageにdisplay: flex; justify-content: center;width: 100%;を指定すると、これは機能します。

Answer 4

コンテナの縮小は、内部のコンテンツ（あなたの場合はテキスト）が消えない限り有効です。 Media Queriesを使用して応答可能なコンテナを作成できますが、内部のテキストは同じサイズのままです。そのため、ページサイズが小さくなるとコンテナが下に滑ります。内側のテキストは同じのfont-sizeです。

私が思いついたように、この問題は、2つの方法で解決することができます。

1：ハードコードCSSメディアクエリは、フォントサイズを変更する

これは多くのことを必要としますあなたは推測作業を行うために多くの@mediaルールを使用する必要があります。あなたのページにscriptを含めたくない場合にのみ、これを使用してください。

2：フォントサイズを処理するためにJavaScriptを使用

は、これは私が考えることができる最適なソリューションです。 JS（私はjQueryを使用）を使用して、contain div内のテキストのフォントサイズを変更することができます。この方法でもハードコーディングはほとんど必要ありません。ここでは例のコードは次のとおりです。

HTML：

<div id="container"> 
    <div class="contain">Button</div> 
    <div class="contain">Button</div> 
    <div class="contain">Button</div> 
    <div class="contain">Button</div> 
    <div class="contain">Button</div> 
    <div class="contain">Button</div> 
    <div class="contain">Button</div> 
    <div class="contain">Button</div> 
    <div class="contain">Button</div> 
    <div class="contain">Button</div> 
</div> 

を覚えておいてください：あなたが1ピクセルで、任意のテキストのフォントサイズを変更する場合、サイズが1ピクセルでのテキストが増加を構成するすべての文字。したがって：

はJavaScript：

$(document).ready(function() { 
    $(window).resize(function() { 
     var window_width = $(window).width(); 
     var contain_count = 10*6; // 10 contain elements * 6 characters of text 'button' 
     var ratio = window_width/contain_count; 
     $('.contain').css('font-size',ratio+'px') 
    }); 
}); 

ですからたいボタンがある場合は、サイドバイサイドに関係なく、あなたも自分のフォントサイズを小さくするために持っているもの、。