Это может звучать странно, но у меня есть немного CSS, который выравнивает mys divs. В одном месте я также использую http://www.brunildo.org/test/img_center.html, который центрирует изображения.
Теперь я хочу, чтобы мои div внутри большего div перешли на другую строку, если эта заполнится. float: left кажется ответом. Проблема в том, что это разрушает мое форматирование. В том числе решение по вышеуказанной ссылке. У меня есть этот тестовый код. Если я уберу ширину и число с плавающей точкой, он будет выглядеть хорошо, за исключением того, что он может занять слишком много места и не перейти к другой строке.
Я думал, что смогу использовать float для externaldiv и центрировать изображение внутри. Однако поплавок: левый все еще ломает его. Я надеюсь, что есть способ убрать float, чтобы каждый div шел влево, но div внутри центров правильно, не нарушая мое форматирование.
<style type="text/css">
.wraptocenter {
display: table-cell;
text-align: center;
vertical-align: middle;
width: 200px;
height: 200px;
background: blue;
}
.wraptocenter * {
vertical-align: middle;
}
/*\*//*/
.wraptocenter {
display: block;
}
.wraptocenter span {
display: inline-block;
height: 100%;
width: 1px;
}
/**/
div.c
{
background: red;
overflow: hidden;
min-width: 400px;
max-width: 400px;
}
div.c div
{
float: left;
}
</style>
<!--[if lt IE 8]><style>
.wraptocenter span {
display: inline-block;
height: 100%;
}
</style><![endif]-->
<div class="c">
<div>
<div>
<div class="wraptocenter"><span></span><img src="a.jpg" alt="/a.jpg"></div>
<div class="wraptocenter"><span></span><img src="a.jpg" alt="/a.jpg"></div>
<div class="wraptocenter"><span></span><img src="a.jpg" alt="/a.jpg"></div>
</div></div></div>