html - How to put six divs in two rows -
my problem when put 6 divs texts , images in 2 rows should this. http://2.firepic.org/2/images/2015-08/17/wv2fu4foh87c.png
but when add
@media screen , (min-width:1000px){ .container { width: 940px; margin: 0 auto; overflow:hidden;} }
and try resize window happening
http://2.firepic.org/2/images/2015-08/17/u06pnsn3elx3.png
here code
<div class="container"> <div class="work-wrap "> <div class="work-item icon1"> <h5 class="title">select piece of jewelry like.</h5> <p>you can choose size, decoration material (silver, gold)</p> </div> <div class="work-item icon2"> <h5 class="title">make decoration unique.</h5> <p>you can write variety of phrases, change shape, , adjust polishing.</p> </div> <div class="work-item icon3"> <h5 class="title">payment methods chosen decorations.</h5> <p>you can use credit card, , other convenient you.</p> </div> <div class="work-item icon4"> <h5 class="title">above decoration ready within 3-7 days.</h5> <p>on site can choose convenient way delivery.</p> </div> <div class="work-item icon5" > <h5 class="title">you have passed menu items.</h5> <p>we beautifully pack , deliver decoration in our signature box.</p> </div> <div class="work-item icon6"> <h5 class="title">wear purchased item pleasure.</h5> <p>as credit cards, , other convenient you.</p> </div> </div> </div>
and css
.work-wrap { overflow: hidden; display: inline-block; margin-bottom: 220px; } h5.title { margin-bottom: 20px; text-align: left; font: 18px/18px robotobold; color: #464646; width: 100%; } .work-item { float: left; width: 33.33%; padding: 90px 8px; } .icon1 { background: url('d:/htmlcss/jewelery/img/icon1.png') no-repeat left top; } .icon2 { background: url('d:/htmlcss/jewelery/img/icon2.png') no-repeat left top; } .icon3 { background: url('d:/htmlcss/jewelery/img/icon3.png') no-repeat left top; } .icon4 { background: url('d:/htmlcss/jewelery/img/icon4.png') no-repeat left top; } .icon5 { background: url('d:/htmlcss/jewelery/img/icon5.png') no-repeat left top; } .icon6 { background: url('d:/htmlcss/jewelery/img/icon6.png') no-repeat left top; }
how can fix it?
using width , padding, third column drops down, since have account margin , padding of body or other outside tags.
.work-wrap { overflow: hidden; display: inline-block; margin-bottom: 220px; text-align: center; } .work-item { display: inline-block; width: 32%; padding: 90px 8px; text-align: left; }
Comments
Post a Comment