私はCSS/HTMLの自動学習者です。私の質問がばかだと謝ります。divの内容でコンテンツが伸びています
最低40％の幅を持つdivが必要ですが、その内容は正当ですが、このdivに追加される項目が増えるとそれに応じて幅が広がります。
これは私がこれまで持っているものです：width:40%またはmin-width:40%と
.hcontainerbutton {
display: flex;
width: 40%;
background-color: blue;
align-items: center;
justify-content: space-around;
right: 30%;
left: 30%;
position: absolute;
bottom: 0!important;
}
両方のdivは、私はあなたの要件に基づいて、それ
ラップ.hcontainerbuttonコンテナ内及びそれにflexboxとheightプロパティを適用します。これを使用してposition: absoluteの代わりに.hcontainerbuttonを配置することができます。
.content divを削除し、フルスクリーンで表示することができます.hcontainerbuttonにmin-width値を追加します。私たちは、作業コードスニペットを追加し、推測することなく、適切にできるような答えであるためには、
body {
margin: 0;
}
.container {
display: flex;
justify-content: center;
height: 100vh;
}
.hcontainerbutton {
min-width: 40%;
background-color: blue;
display: flex;
justify-content: space-around;
margin-top: auto;
}
.content {
background: pink;
width: 100px;
height: 100px;
}<div class="container">
<div class="hcontainerbutton">
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
</div>
</div>は魅力的に働いた!!残念ながら、私の評判のために投票をすることはできません...しかし、たくさんありがとうございます – CMig
私はちょっとした問題があります。基本的に私のためのあなたの.contentはボタンなので、私は彼らがホバー上で別のスタイルを持ってほしいです。幅のスタイルだけをホバリングすると、固定幅に変更されます。彼らが最大限のスペースをカバーするために100％の幅を与えれば、彼らは去ることができます。hcontainerボタンは常に40％幅です。 – CMig
@CMigあなたが何を意味しているか正確にはわからないが、問題を示すデモを作成できるだろうか？ありがとう – sol
に複数の項目を追加する場合、これを行うことができます成長しません通常のCSS自体では、あなたはフレックスのために行く必要はありません、ここで何が行われたの説明です。
まず、幅と高さをhtmlとbodyタグに設定してから、margin:0pxを使用してブラウザで設定した余白を削除します。
html,
body {
width: 100% height: auto;
margin: 0px;
}
今中心のdivをラップする親は、これは、それはdisplayプロパティinline-blockを持つ要素を中央揃えになるん基本的に何を、CSSプロパティtext-align:centerを持っている必要があります。
.parent {
text-align: center;
}
が次にクラスhcontainerbuttonを持ってメインのdiv、に来て、我々は必要とされているものに（例では、私は80%を使用）max-widthを設定（例では、私は40%を使用）とmin-widthことができます。 CSSプロパティdisplay:inline-blockは、コンテンツの幅だけを保証します。 CSSプロパティword-wrap:break-wordは、テキストが壊れていることを保証し、divのwidhtを維持します。
以下は、コードのスニペットです。
html,
body {
width: 100% height: auto;
margin: 0px;
}
.parent {
text-align: center;
}
.hcontainerbutton {
word-wrap: break-word;
min-width: 40%;
max-width: 80%;
display: inline-block;
}<div class="parent">
<div class="hcontainerbutton"> asdf
</div>
<div class="hcontainerbutton"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eleifend magna augue. Morbi sagittis eu urna et facilisis. Nam finibus erat justo, vel porta magna aliquam a. Pellentesque faucibus molestie libero vitae condimentum. Nunc condimentum tincidunt
nulla, id suscipit magna dignissim id. Nulla dapibus suscipit velit et viverra. Mauris non gravida justo. Sed efficitur eleifend elementum. Integer non mattis mi. Etiam vestibulum viverra erat, eget dapibus tellus iaculis ut. Mauris ullamcorper magna
sapien, ac gravida odio blandit varius. Fusce eu placerat enim. Etiam nec elementum dui. In fermentum massa sed augue interdum aliquam. Nunc lacinia blandit elit a iaculis.
</div>
</div>
。 – LGSon