適合外部div與其內容

Question

在下面的例子中，我怎樣才能使outer div以適應盒子的寬度？我發現的所有解決方案都表示外部div必須有display: inline-block，但如果子元素也是inline-block，那麼似乎不起作用。是否有任何其他的解決方案：

https://jsfiddle.net/45fexke7/

總之outer DIV應內部wrapper居中和具有內部內容的寬度。

編輯：

這必須響應！ wrapper在這個例子中有一個固定的寬度，但假設它是width: 100%。它應該在一行中顯示儘可能多的方框，但它必須有一個剩餘空間，方框必須居中。

Answer 1

您可以將外部類的顯示屬性設置爲flex。帶有這些附加屬性的 。

https://jsfiddle.net/sambit_satpathy/h2gurosb/

#outer { 
    display: flex; 
    justify-content:center; 
    text-align: left; 
    background-color: black; 
    width:100%; 
    flex-wrap:wrap; 
} 

Answer 2

您正在尋找這樣的事情？

#wrapper { 
 
    width: 800px; 
 
    background-color: red; 
 
    text-align: center; 
 
    margin: 0 auto; 
 
} 
 
#outer { 
 
    /* display: inline-block; */ 
 
    text-align: left; 
 
    background-color: black; 
 
    width: 100%; 
 
} 
 
.inner { 
 
    width: 33%; 
 
    height: 200px; 
 
    /* margin: 5px; */ 
 
    background-color: green; 
 
    display: inline-block; 
 
}

<div id="wrapper"> 
 

 
    <div id="outer"> 
 
    <div class="inner"></div> 
 
    <div class="inner"></div> 
 
    <div class="inner"></div> 
 
    <div class="inner"></div> 
 
    <div class="inner"></div> 
 
    <div class="inner"></div> 
 
    <div class="inner"></div> 
 
    <div class="inner"></div> 
 
    <div class="inner"></div> 
 
    <div class="inner"></div> 
 
    <div class="inner"></div> 
 
    </div> 
 

 
</div>

Answer 3

我認爲你可以做到這一點，但你需要腳本來幫助使外部的寬度。注意你的inner包含margin，因此你需要在腳本中處理它。

$(function ($) { 
 
    var longestWidth = 0; 
 
    var sumwidth = 0; 
 
    $("#outer").children().each(function() { 
 
     var child = $(this); 
 
    if(sumwidth + child.width()+10<800) 
 
     sumwidth+=child.width()+10; 
 
    else 
 
    { 
 
     if(longestWidth<sumwidth) 
 
     longestWidth = sumwidth+10; 
 
     console.log(longestWidth); 
 
     sumwidth = 0; 
 
    } 
 
     
 
    }); 
 
    $("#outer").width(longestWidth); 
 
});

#wrapper { 
 
    width: 800px; 
 
    background-color: red; 
 
    text-align:center; 
 
} 
 

 
#outer { 
 
    
 
    background-color: black; 
 
    display: inline-block; 
 
} 
 

 
.inner { 
 
    width: 220px; 
 
    height: 200px; 
 
    margin: 5px; 
 
    background-color: green; 
 
display: inline-block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="wrapper"> 
 
    <div id="outer"> 
 
    <div class="inner"></div> 
 
    <div class="inner"></div> 
 
    <div class="inner"></div> 
 
    <div class="inner"></div> 
 
    <div class="inner"></div> 
 
    <div class="inner"></div> 
 
    <div class="inner"></div> 
 
    <div class="inner"></div> 
 
    </div> 
 
</div>

Answer 4

這應該去當你的期望。

將內部div寬度更改爲百分比並更改了邊距。

.inner { 
    margin-left: 6px; 
    margin-top: 5px; 
    width: 32%; 
    height: 200px; 
    background-color: green; 
    display: inline-block; 
} 

#wrapper { 
 
    width: 800px; 
 
    background-color: red; 
 
    text-align: center; 
 
} 
 

 
#outer { 
 
    width: 100%; 
 
    display: inline-block; 
 
    text-align: left; 
 
    background-color: black; 
 
} 
 

 
.inner { 
 
    margin-left: 6px; 
 
    margin-top: 5px; 
 
    width: 32%; 
 
    height: 200px; 
 
    background-color: green; 
 
    display: inline-block; 
 
}

<div id="wrapper"> 
 

 
    <div id="outer"> 
 
    <div class="inner"></div> 
 
    <div class="inner"></div> 
 
    <div class="inner"></div> 
 
    <div class="inner"></div> 
 
    <div class="inner"></div> 
 
    <div class="inner"></div> 
 
    <div class="inner"></div> 
 
    <div class="inner"></div> 
 
    <div class="inner"></div> 
 
    <div class="inner"></div> 
 
    <div class="inner"></div> 
 
    </div> 
 

 
</div>