Question

我想在div（#account_thumbs）中设置一个父div（#useruploads）（是的，它在技术上是一个子div），以便在该div中居中，而所述父div的子div（.imagethumb）将左对齐。

但我现在的问题是，由于父div的动态宽度，整个事物要么是居中的，要么是左对齐的。这似乎是由于浏览器生成的新行，当他无法在同一行上放置更多div时（点击max-width: 75%）。每个子div都有width 156px和margin 2px。

当#useruploads现在width 505px时，浏览器只能将三个.imagethumb放在同一行，然后创建一个新行 - 但不是获取#account_thumbs的{{1}} width，浏览器只占用整个空间（这就是我遇到问题的原因）。下面的小提琴显示了我的困境。

我现在的问题是，我该如何预防或绕过这个~470px＆＃34;功能＆＃34;出现时，我可以将eat the whole available space置于#account_thumbs内，而#useruploads框左对齐？

＆＃13;

.imagethumb

＆＃13;

#useruploads {
	display: inline-flex;
	flex-wrap: wrap;
	max-width: 75%;
	min-width: 300px;
	margin-top: 0px;
	margin-left: auto;
	margin-right: auto;
	padding: 5px;
}

#account_thumbs {
	display: inline-flex;
	flex-wrap: wrap;
	width: 100%;
	margin: 0 auto;
	overflow: hidden;
}

#account_thumbs_clearfix {
	clear: both;
}

#user_albums {
	overflow: hidden;
}

.pageindicator {
	
}

#pageindicator_top {
	display: inline-block;
	margin-left: auto;
	margin-right: 0px;
	margin-bottom: 10px;
}

#pageindicator_top  a, #pageindicator_bottom  a {
	color: #2779AA !important;
}

#pageindicator_top  .ui-state-active, #pageindicator_bottom  .ui-state-active {
	color: #FFF !important;
}

#pageindicator_bottom {
	display: inline-block;
	margin-top: 10px;
	margin-left: auto;
	margin-right: 0px;
}

.imagethumb {
	position: relative;
	display: inline-block;
	padding: 3px;
	margin: 2px;
	line-height: 0;
	width: 150px;
	height: 150px;
	background: #333 none repeat scroll 0% 0%;
	-moz-user-select: none;
	-ms-user-select: none;
	-webkit-user-select: none;
}

.imagethumb_element {
	
}

.imagethumb_element img {
	max-height: 150px;
	max-width: 150px;
}

.hover-icons {
	display: none;
	position: absolute;
	bottom: 0;
	right: 0;
	height: 20px;
	width: 44px;
	background: rgba(51, 51, 51, 0.8) none repeat scroll 0% 0%;
}

.hover-icons-small {
	display: none;
	position: absolute;
	bottom: 0;
	right: 0;
	height: 20px;
	width: 20px;
	background: rgba(51, 51, 51, 0.8) none repeat scroll 0% 0%;
}

.hover-icons-subelements {
	position: relative;
	margin-top: 2px;
}

＆＃13;

Answer 1

如果我理解正确，那么您要查找的结果是最后一行显示在布局中心。发生的事情是缩略图的包含div已经占据了其父节点提供的整个空间。它居中，但左边距现在位于其容器的左边缘。该边距是一条直线，它在容器的整个高度上运行。

因此，您左侧对齐的个人拇指乖乖地与其容器的左边缘对齐，以达到其整个高度。您可以尝试为每一行添加一个新的包含div，或者调整拇指本身的对齐方式，而不是父级。

将div中的父div对齐，子div与左对齐

1 个答案: