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