div與最小寬度增長與它的內容

我是一個CSS/HTML自動學習者，道歉，如果我的問題是愚蠢的。div與最小寬度增長與它的內容

我想要一個最小寬度爲40％的div，其內容是合理的，但是當更多的項目將被添加到這個div中時，它的寬度會相應增加。

這是我到目前爲止有：

.hcontainerbutton { 
    display: flex; 
    width: 40%; 
    background-color: blue; 
    align-items: center; 
    justify-content: space-around; 
    right: 30%; 
    left: 30%; 
    position: absolute; 
    bottom: 0!important; 
}

都與width:40%或min-width:40%如果我添加更多的項目到它

來源

2017-10-14 CMig

對於我們能夠正確回答不猜測，添加一個工作代碼段。 – LGSon

裹.hcontainerbutton在容器和應用flexbox和height屬性吧。這可以用來定位.hcontainerbutton而不是position: absolute。
min-width值添加到.hcontainerbutton

您可以通過添加測試這個佈局和刪除.content的div和全屏觀看。

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>

來源

2017-10-14 14:05:50 sol

像魅力一樣工作！不幸的是，由於我的聲譽，我不能給任何投票...但是非常感謝 – CMig

我只是有一個小問題，不確定它是否可以修復。基本上你的.content對我來說是按鈕，因此我希望他們在懸停時有不同的風格。當僅懸停在寬度樣式上時給予它們一個固定寬度會發生變化。如果我給他們100％的寬度來覆蓋他們可以離開的最大空間。hcontainerbutton總是40％寬。 – CMig

@CMig我不完全確定你的意思，你能夠創建一個演示顯示問題的演示？謝謝 – sol

根據您的要求股利不會增長，這是可以做到與普通的CSS本身一樣，你不需要去flex，下面是關於做什麼的解釋。

首先我們設置html和body標籤的寬度和高度，然後使用margin:0px刪除瀏覽器設置的頁邊距。

html, 
body { 
    width: 100% height: auto; 
    margin: 0px; 
}

現在將包裝中心的div將有父有CSS屬性text-align:center，基本上這樣做是什麼，它會居中對齊顯示屬性inline-block元素。

.parent { 
    text-align: center; 
}

然後來到主分區，它具有類hcontainerbutton，我們可以設置max-width（在本例中我使用40%）和min-width（在本例中我使用80%）到需要的一切。 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>

來源

2017-10-14 13:29:43

div與最小寬度增長與它的內容

回答

相關問題