Divs не выровнен по вертикали на смартфоне и малых браузерах

Question

Моих дивов не суммируется с вертикальным выравниванием:

Fine, когда горизонтальные:

Не выровнен, когда вертикальные:

I пишите внутреннее css, потому что мы меняем текстовые редакторы в Magento, чтобы вставлять мои страницы.

https://jsfiddle.net/mastervision/8qqtadv0/

<div style="width:500 px"> 
<div style="float:left; margin: 0px 7px 0px 0px; line-height: 0; border: 1px solid #021a40; width:100 px"><img src="http://i60.tinypic.com/6ypsoh.png" alt="" /></div> 
<div style="float:left; margin: 0px 7px 0px 7px; line-height: 0; border: 1px solid #021a40; width:100 px"><img src="http://i60.tinypic.com/6ypsoh.png" alt="" /></div> 
<div style="float:left; margin: 0px 7px 0px 7px; line-height: 0; border: 1px solid #021a40; width:100 px"><img src="http://i60.tinypic.com/6ypsoh.png" alt="" /></div> 

<div style="clear:both"></div> 
</div> 

Answer 1

Ваш второй и третий ДИВ имеет дополнительный левый margin7px из набора держать это же для всех нравится

margin: 0px 7px 0px 0px; 

Пример:

<div style="float:left; margin: 0px 7px 0px 0px; line-height: 0; border: 1px solid #021a40; width:100 px"><img src="http://i60.tinypic.com/6ypsoh.png" alt="" /></div> 
<div style="float:left; margin: 0px 7px 0px 0px; line-height: 0; border: 1px solid #021a40; width:100 px"><img src="http://i60.tinypic.com/6ypsoh.png" alt="" /></div> 
<div style="float:left; margin: 0px 7px 0px 0px; line-height: 0; border: 1px solid #021a40; width:100 px"><img src="http://i60.tinypic.com/6ypsoh.png" alt="" /></div> 

http://i60.tinypic.com/6ypsoh.png http://i60.tinypic.com/6ypsoh.png http://i60.tinypic.com/6ypsoh.png

, если вы хотите, выровнены по вертикали и по горизонтали затем добавить 7px к первому div слишком

margin: 0px 7px 0px 7px; 

Пример:

<div style="float:left; margin: 0px 7px 0px 7px; line-height: 0; border: 1px solid #021a40; width:100 px"><img src="http://i60.tinypic.com/6ypsoh.png" alt="" /></div> 
<div style="float:left; margin: 0px 7px 0px 7px; line-height: 0; border: 1px solid #021a40; width:100 px"><img src="http://i60.tinypic.com/6ypsoh.png" alt="" /></div> 
<div style="float:left; margin: 0px 7px 0px px; line-height: 0; border: 1px solid #021a40; width:100 px"><img src="http://i60.tinypic.com/6ypsoh.png" alt="" /></div> 

http://i60.tinypic.com/6ypsoh.png

http://i60.tinypic.com/6ypsoh.png http://i60.tinypic.com/6ypsoh.png

Answer 2

Вы просто забудете прописку на своем 1-м дивизионе. Это должно сработать.

<div style="width:500 px"> 
<div style="float:left; margin: 0px 7px 0px 7px; line-height: 0; border: 1px solid #021a40; width:100 px"><img src="http://i60.tinypic.com/6ypsoh.png" alt="" /></div> 
<div style="float:left; margin: 0px 7px 0px 7px; line-height: 0; border: 1px solid #021a40; width:100 px"><img src="http://i60.tinypic.com/6ypsoh.png" alt="" /></div> 
<div style="float:left; margin: 0px 7px 0px 7px; line-height: 0; border: 1px solid #021a40; width:100 px"><img src="http://i60.tinypic.com/6ypsoh.png" alt="" /></div> 

<div style="clear:both"></div> 
</div> 

Answer 3

У Вас есть несколько различных полеи для первого DIV - он показывает как имеющие 0 пикселей лева поля, в то время как другие 2 оба имеют 7 пикселей, левый край.

Answer 4

Он работал нормально, вы ввели 0px вместо 7px.

http://i60.tinypic.com/6ypsoh.png

Answer 5

Добавлен левый и правый margin на три див одинаково, и добавил отрицательный margin к наружному дел. Таким образом, он будет иметь одинаковый интервал в большом экране, а также выровнять его на маленьком экране.

Проверьте это https://jsfiddle.net/afelixj/8qqtadv0/1/