1
我想獲得一個div div（#useruploads）中的父div（#account_thumbs）（是的，它在技術上是一個子div），以該div爲中心，而所述父div的子div（.imagethumb）將被左對齊。對齊父div在div中心和子div對齊左
但我現在的問題是，由於父div的動態寬度，整個事情是中心或左對齊。這似乎是由於瀏覽器產生的新行，因爲他無法在同一行放置更多的div（擊中max-width: 75%）。每個子div的width的156px和margin的2px。
當#useruploads現在有505px一個width，只能放三.imagethumb在同一直線上，然後瀏覽器發出一個新的生產線 - 而是獲得的~470px的#account_thumbswidth，瀏覽器只佔用了整個空間（這就是爲什麼我有這個問題）。下面的小提琴顯示我的困境。
我的問題是，現在，我怎麼能防止或繞過這個eat the whole available space「功能」出現，讓我能位置爲中心內部#useruploads#account_thumbs，而.imagethumb盒送靠左對齊？
#useruploads {
\t display: inline-flex;
\t flex-wrap: wrap;
\t max-width: 75%;
\t min-width: 300px;
\t margin-top: 0px;
\t margin-left: auto;
\t margin-right: auto;
\t padding: 5px;
}
#account_thumbs {
\t display: inline-flex;
\t flex-wrap: wrap;
\t width: 100%;
\t margin: 0 auto;
\t overflow: hidden;
}
#account_thumbs_clearfix {
\t clear: both;
}
#user_albums {
\t overflow: hidden;
}
.pageindicator {
\t
}
#pageindicator_top {
\t display: inline-block;
\t margin-left: auto;
\t margin-right: 0px;
\t margin-bottom: 10px;
}
#pageindicator_top a, #pageindicator_bottom a {
\t color: #2779AA !important;
}
#pageindicator_top .ui-state-active, #pageindicator_bottom .ui-state-active {
\t color: #FFF !important;
}
#pageindicator_bottom {
\t display: inline-block;
\t margin-top: 10px;
\t margin-left: auto;
\t margin-right: 0px;
}
.imagethumb {
\t position: relative;
\t display: inline-block;
\t padding: 3px;
\t margin: 2px;
\t line-height: 0;
\t width: 150px;
\t height: 150px;
\t background: #333 none repeat scroll 0% 0%;
\t -moz-user-select: none;
\t -ms-user-select: none;
\t -webkit-user-select: none;
}
.imagethumb_element {
\t
}
.imagethumb_element img {
\t max-height: 150px;
\t max-width: 150px;
}
.hover-icons {
\t display: none;
\t position: absolute;
\t bottom: 0;
\t right: 0;
\t height: 20px;
\t width: 44px;
\t background: rgba(51, 51, 51, 0.8) none repeat scroll 0% 0%;
}
.hover-icons-small {
\t display: none;
\t position: absolute;
\t bottom: 0;
\t right: 0;
\t height: 20px;
\t width: 20px;
\t background: rgba(51, 51, 51, 0.8) none repeat scroll 0% 0%;
}
.hover-icons-subelements {
\t position: relative;
\t margin-top: 2px;
}<link href="https://www.anitube-nocookie.ch/res/global.css" rel="stylesheet"/>
<div id="useruploads">
\t <div id="pageindicator_top" class="pageindicator">
\t <a id="imagehost_pagebutton_1" class="buttons_medium ui-state-active" >1</a> <a id="imagehost_pagebutton_2" class="buttons_medium ui-state-active" >2</a> <a id="imagehost_pagebutton_3" class="buttons_medium ui-state-active" >3</a> <a id="imagehost_pagebutton_4" class="buttons_medium ui-state-active" >4</a> <a id="imagehost_pagebutton_5" class="buttons_medium ui-state-active" >5</a> <a id="imagehost_pagebutton_6" class="buttons_medium ui-state-active" >6</a> <a id="imagehost_pagebutton_7" class="buttons_medium ui-state-active" >7</a>
\t </div>
\t <div id="account_thumbs_clearfix">
\t </div>
\t <div id="account_thumbs">
\t <div id="hGhh9Oi" class="imagethumb ui-draggable ui-draggable-handle" data-pid="hGhh9Oi">
\t \t <a class="imagethumb_element" ><img src="https://www.anitube-nocookie.ch/res/imagehost_add_album.png" /></a>
\t \t <div id="hover-icons-hGhh9Oi" class="hover-icons ui-draggable ui-draggable-handle" style="display: none;">
\t \t \t <a class="cursor-pointer " ><img class="hover-icons-subelements" src="https://www.anitube-nocookie.ch/res/link_break.png"></a> <a class="cursor-pointer" ><img class="hover-icons-subelements" src="https://www.anitube-nocookie.ch/res/cross.png"></a>
\t \t </div>
\t </div><div id="3rV4fWv" class="imagethumb ui-draggable ui-draggable-handle" data-pid="3rV4fWv">
\t \t <a class="imagethumb_element" ><img src="https://www.anitube-nocookie.ch/res/imagehost_add_album.png" /></a>
\t \t <div id="hover-icons-3rV4fWv" class="hover-icons ui-draggable ui-draggable-handle">
\t \t \t <a class="cursor-pointer " ><img class="hover-icons-subelements" src="https://www.anitube-nocookie.ch/res/link_break.png"></a> <a class="cursor-pointer" ><img class="hover-icons-subelements" src="https://www.anitube-nocookie.ch/res/cross.png"></a>
\t \t </div>
\t </div><div id="CRoBsHA" class="imagethumb ui-draggable ui-draggable-handle" data-pid="CRoBsHA">
\t \t <a class="imagethumb_element" ><img src="https://www.anitube-nocookie.ch/res/imagehost_add_album.png" /></a>
\t \t <div id="hover-icons-CRoBsHA" class="hover-icons ui-draggable ui-draggable-handle" style="display: none;">
\t \t \t <a class="cursor-pointer " ><img class="hover-icons-subelements" src="https://www.anitube-nocookie.ch/res/link_break.png"></a> <a class="cursor-pointer" ><img class="hover-icons-subelements" src="https://www.anitube-nocookie.ch/res/cross.png"></a>
\t \t </div>
\t </div><div id="ofU2T57" class="imagethumb ui-draggable ui-draggable-handle" data-pid="ofU2T57">
\t \t <a class="imagethumb_element" ><img src="https://www.anitube-nocookie.ch/res/imagehost_add_album.png" /></a>
\t \t <div id="hover-icons-ofU2T57" class="hover-icons ui-draggable ui-draggable-handle" style="display: none;">
\t \t \t <a class="cursor-pointer " ><img class="hover-icons-subelements" src="https://www.anitube-nocookie.ch/res/link_break.png"></a> <a class="cursor-pointer" ><img class="hover-icons-subelements" src="https://www.anitube-nocookie.ch/res/cross.png"></a>
\t \t </div>
\t </div><div id="iLsZ3ON" class="imagethumb ui-draggable ui-draggable-handle" data-pid="iLsZ3ON">
\t \t <a class="imagethumb_element" ><img src="https://www.anitube-nocookie.ch/res/imagehost_add_album.png" /></a>
\t \t <div id="hover-icons-iLsZ3ON" class="hover-icons ui-draggable ui-draggable-handle" style="display: none;">
\t \t \t <a class="cursor-pointer " ><img class="hover-icons-subelements" src="https://www.anitube-nocookie.ch/res/link_break.png"></a> <a class="cursor-pointer" ><img class="hover-icons-subelements" src="https://www.anitube-nocookie.ch/res/cross.png"></a>
\t \t </div>
\t </div><div id="EHM7Gw5" class="imagethumb ui-draggable ui-draggable-handle" data-pid="EHM7Gw5">
\t \t <a class="imagethumb_element" ><img src="https://www.anitube-nocookie.ch/res/imagehost_add_album.png" /></a>
\t \t <div id="hover-icons-EHM7Gw5" class="hover-icons ui-draggable ui-draggable-handle" style="display: none;">
\t \t \t <a class="cursor-pointer " ><img class="hover-icons-subelements" src="https://www.anitube-nocookie.ch/res/link_break.png"></a> <a class="cursor-pointer" ><img class="hover-icons-subelements" src="https://www.anitube-nocookie.ch/res/cross.png"></a>
\t \t </div>
\t </div><div id="1SxMR9t" class="imagethumb ui-draggable ui-draggable-handle" data-pid="1SxMR9t">
\t \t <a class="imagethumb_element" ><img src="https://www.anitube-nocookie.ch/res/imagehost_add_album.png" /></a>
\t \t <div id="hover-icons-1SxMR9t" class="hover-icons ui-draggable ui-draggable-handle" style="display: none;">
\t \t \t <a class="cursor-pointer " ><img class="hover-icons-subelements" src="https://www.anitube-nocookie.ch/res/link_break.png"></a> <a class="cursor-pointer" ><img class="hover-icons-subelements" src="https://www.anitube-nocookie.ch/res/cross.png"></a>
\t \t </div>
\t </div><div id="StxvBZi" class="imagethumb ui-draggable ui-draggable-handle" data-pid="StxvBZi">
\t \t <a class="imagethumb_element" ><img src="https://www.anitube-nocookie.ch/res/imagehost_add_album.png" /></a>
\t \t <div id="hover-icons-StxvBZi" class="hover-icons ui-draggable ui-draggable-handle" style="display: none;">
\t \t \t <a class="cursor-pointer " ><img class="hover-icons-subelements" src="https://www.anitube-nocookie.ch/res/link_break.png"></a> <a class="cursor-pointer" ><img class="hover-icons-subelements" src="https://www.anitube-nocookie.ch/res/cross.png"></a>
\t \t </div>
\t </div><div id="5H2ndxU" class="imagethumb ui-draggable ui-draggable-handle" data-pid="5H2ndxU">
\t \t <a class="imagethumb_element" ><img src="https://www.anitube-nocookie.ch/res/imagehost_add_album.png" /></a>
\t \t <div id="hover-icons-5H2ndxU" class="hover-icons ui-draggable ui-draggable-handle" style="display: none;">
\t \t \t <a class="cursor-pointer " ><img class="hover-icons-subelements" src="https://www.anitube-nocookie.ch/res/link_break.png"></a> <a class="cursor-pointer" ><img class="hover-icons-subelements" src="https://www.anitube-nocookie.ch/res/cross.png"></a>
\t \t </div>
\t </div><div id="OkHgAdu" class="imagethumb ui-draggable ui-draggable-handle" data-pid="OkHgAdu">
\t \t <a class="imagethumb_element" ><img src="https://www.anitube-nocookie.ch/res/imagehost_add_album.png" /></a>
\t \t <div id="hover-icons-OkHgAdu" class="hover-icons ui-draggable ui-draggable-handle" style="display: none;">
\t \t \t <a class="cursor-pointer " ><img class="hover-icons-subelements" src="https://www.anitube-nocookie.ch/res/link_break.png"></a> <a class="cursor-pointer" ><img class="hover-icons-subelements" src="https://www.anitube-nocookie.ch/res/cross.png"></a>
\t \t </div>
\t </div><div id="Qbu49rU" class="imagethumb ui-draggable ui-draggable-handle" data-pid="Qbu49rU">
\t \t <a class="imagethumb_element" ><img src="https://www.anitube-nocookie.ch/res/imagehost_add_album.png" /></a>
\t \t <div id="hover-icons-Qbu49rU" class="hover-icons ui-draggable ui-draggable-handle" style="display: none;">
\t \t \t <a class="cursor-pointer " ><img class="hover-icons-subelements" src="https://www.anitube-nocookie.ch/res/link_break.png"></a> <a class="cursor-pointer" ><img class="hover-icons-subelements" src="https://www.anitube-nocookie.ch/res/cross.png"></a>
\t \t </div>
\t </div><div id="O6HwQ5j" class="imagethumb ui-draggable ui-draggable-handle" data-pid="O6HwQ5j">
\t \t <a class="imagethumb_element" ><img src="https://www.anitube-nocookie.ch/res/imagehost_add_album.png" /></a>
\t \t <div id="hover-icons-O6HwQ5j" class="hover-icons ui-draggable ui-draggable-handle" style="display: none;">
\t \t \t <a class="cursor-pointer " ><img class="hover-icons-subelements" src="https://www.anitube-nocookie.ch/res/link_break.png"></a> <a class="cursor-pointer" ><img class="hover-icons-subelements" src="https://www.anitube-nocookie.ch/res/cross.png"></a>
\t \t </div>
\t </div><div id="g1FmyqK" class="imagethumb ui-draggable ui-draggable-handle" data-pid="g1FmyqK">
\t \t <a class="imagethumb_element" ><img src="https://www.anitube-nocookie.ch/res/imagehost_add_album.png" /></a>
\t \t <div id="hover-icons-g1FmyqK" class="hover-icons ui-draggable ui-draggable-handle" style="display: none;">
\t \t \t <a class="cursor-pointer " ><img class="hover-icons-subelements" src="https://www.anitube-nocookie.ch/res/link_break.png"></a> <a class="cursor-pointer" ><img class="hover-icons-subelements" src="https://www.anitube-nocookie.ch/res/cross.png"></a>
\t \t </div>
\t </div><div id="5WxObcv" class="imagethumb ui-draggable ui-draggable-handle" data-pid="5WxObcv">
\t \t <a class="imagethumb_element" ><img src="https://www.anitube-nocookie.ch/res/imagehost_add_album.png" /></a>
\t \t <div id="hover-icons-5WxObcv" class="hover-icons ui-draggable ui-draggable-handle" style="display: none;">
\t \t \t <a class="cursor-pointer " ><img class="hover-icons-subelements" src="https://www.anitube-nocookie.ch/res/link_break.png"></a> <a class="cursor-pointer" ><img class="hover-icons-subelements" src="https://www.anitube-nocookie.ch/res/cross.png"></a>
\t \t </div>
\t </div>
\t \t <div id="account_thumbs_clearfix"></div>
\t </div>
\t <div id="account_thumbs_clearfix">
\t </div>
\t <div id="pageindicator_bottom" class="pageindicator">
\t <a id="imagehost_pagebutton_1" class="buttons_medium ui-state-active" >1</a> <a id="imagehost_pagebutton_2" class="buttons_medium ui-state-active" >2</a> <a id="imagehost_pagebutton_3" class="buttons_medium ui-state-active" >3</a> <a id="imagehost_pagebutton_4" class="buttons_medium ui-state-active" >4</a> <a id="imagehost_pagebutton_5" class="buttons_medium ui-state-active" >5</a> <a id="imagehost_pagebutton_6" class="buttons_medium ui-state-active" >6</a> <a id="imagehost_pagebutton_7" class="buttons_medium ui-state-active" >7</a>
\t </div>
\t <div id="account_thumbs_clearfix">
\t </div>
</div>
我強烈建議使用彈性盒。定位可以在2-3行CSS中完成。在這裏開始使用Flex-box CSS的重要指南：https://css-tricks.com/snippets/css/a-guide-to-flexbox/ – Korgrue
我已經嘗試過'inline-flex'之前，但沒有有運氣（使用相同的指南）。你認爲'flex-box'會更好嗎？ @Korgrue –
inline-flex是flex-box的一部分。 put：justify-content：flex-start;和align-items：以容器div爲中心。去除兒童上的所有其他位置。 – Korgrue