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