2017-01-16 14 views
0

ウィンドウがサイズ変更されると、テキストが「プッシュ」し、ボタンが押し下げられます。テキストのサイズを変更するときに項目が同じ高さに留まるようにするにはどうすればよいですか?

buttonが全部あります。ボタンを同じ場所に置いておきたい。

Check external fiddle to be able to resize to desktop

+1

あなたは[MCVE]問題を実証している提供することはできますか? –

+0

私は最小限のバージョンのコードを作成しました:https://jsfiddle.net/8vg0u1d6/6/ –

+0

コードヘルプを求める質問は、それを再現するのに必要な最短のコードを含める必要があります。スニペット**](https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/)。 –

答えて

1

問題は、あなたのbutton sがテキストコンテンツへの参照で自分自身を配置しますです。

編集:私はフレックスを使用していたことに気がついたので、それを利用しないでください。

解決方法1:フレキシボックス

---> JS Fiddle <---

enter image description here

解決方法2:min-height

あなたはp SIMにmin-height値を設定することができます私は180pxを使用しましたが、後者が非常に短い場合はbuttonとテキストの間にギャップがあることに注意してください。また、ビューポートの幅に応じて変化します。 min-heightをあふれさせるように、バランスを見つけることを試みてください。

min-heightからsection article pを追加します。 (あなたの利益に合わせて値を調整してください - 単に高さの参考としてpborderが追加されました)。

---> JSFiddle <---

enter image description here

関連する問題