Вывод блока в 30% от ширины странички

171

10 декабря 2016, 10:28

Здравствуйте. Хочу сделать на страничке вывод товаров блоками, по три в ряд. и все бы хорошо, все сделал. вышло так как нужно:

Но есть одна проблема. Если товаров столько сколько нужно чтоб каждый товар был в ряд по три штуки, все хорошо, но если одному ряду не хватает товара, или двух, то товар заполняет весь ряд. И выходит вот так:

Каким образом сделать чтобы каждый из товаров занимал только свое пространство, так же как и если они в одном ряду из трех товаров? Буду благодарен за помощь!

#orange_zone { 
  background-color: #fbb400; 
  margin-top: 40px; 
  padding: 25px 50px 25px 50px; 
} 
.case_news { 
  display: table; 
  margin-top: 13px; 
  width: 100%; 
  border-spacing: 15px 10px; 
} 
#case_case_case { 
  display: table; 
  margin-top: 13px; 
  width: 100%; 
  border-spacing: 15px 10px; 
} 
#case_news_info { 
  display: table-cell; 
  background-color: #fff; 
  width: 27%; 
  margin: 10px; 
  /*padding: 10px;*/ 
} 
.title_news { 
  font-size: 1.4em; 
  font-weight: bold; 
  padding-bottom: 15px; 
  padding: 10px; 
} 
.content_news { 
  line-height: 20px; 
  padding: 10px; 
} 
.content_news2 { 
  line-height: 20px; 
  /*padding: 10px;*/ 
} 
.content_news2 img { 
  width: 100%; 
  vertical-align: bottom; 
} 
.footer_news { 
  border-top: 2px solid #fbb400; 
  padding: 10px; 
  text-align: center; 
} 
.footer_news2 { 
  border-top: 2px solid #fbb400; 
  padding: 10px; 
} 
a.buttom_look { 
  border: 2px solid #fff; 
  padding: 15px; 
  width: 100px; 
  height: 16px; 
  text-align: center; 
  /*margin-top: 25px;*/ 
  display: block; 
  background-color: #fbb400; 
  color: #fff; 
} 
a.buttom_look:hover { 
  text-decoration: none; 
  background-color: #f4b108; 
  color: #fff; 
}

<div id="orange_zone"> 
 
  <div id="case_case_case"> 
    <div class="case_news"> 
      <div id="case_news_info"> 
        <div class="head_news"> 
          <div class="content_news2"> 
            <img src="/gallery/photos_soh/7/56f92407fa55571c6a7bc384796d370c.jpg" alt="" /> 
          </div> 
        </div> 
        <div class="footer_news2"> 
          <div class="detal_med"> 
            <div class="title_ded_med">dfvbdfbff</div> 
            fvdfb dfb d</div> 
          <div class="look_more"> 
            <a href="/" class="buttom_look">1000$</a> 
          </div> 
        </div> 
      </div> 
      <div id="case_news_info"> 
        <div class="head_news"> 
          <div class="content_news2"> 
            <img src="/gallery/photos_soh/6/qww.jpg" alt="" /> 
          </div> 
        </div> 
        <div class="footer_news2"> 
          <div class="detal_med"> 
            <div class="title_ded_med">Супер мед</div> 
            Очень хороший мед</div> 
          <div class="look_more"> 
            <a href="/" class="buttom_look">70$</a> 
          </div> 
        </div> 
      </div> 
      <div id="case_news_info"> 
        <div class="head_news"> 
          <div class="content_news2"> 
            <img src="/gallery/photos_soh/5/qww.jpg" alt="" /> 
          </div> 
        </div> 
        <div class="footer_news2"> 
          <div class="detal_med"> 
            <div class="title_ded_med">Lime honey 15</div> 
            Бла бла бла</div> 
          <div class="look_more"> 
            <a href="/" class="buttom_look">100$</a> 
          </div> 
        </div> 
      </div> 
    </div> 
  </div> 
  <div id="case_case_case"> 
    <div class="case_news"> 
      <div id="case_news_info"> 
        <div class="head_news"> 
          <div class="content_news2"> 
            <img src="/gallery/photos_soh/4/med.png" alt="" /> 
          </div> 
        </div> 
        <div class="footer_news2"> 
          <div class="detal_med"> 
            <div class="title_ded_med">Lime honey 10</div> 
            vintage 2016</div> 
          <div class="look_more"> 
            <a href="/" class="buttom_look">100$</a> 
          </div> 
        </div> 
      </div> 
      <div id="case_news_info"> 
        <div class="head_news"> 
          <div class="content_news2"> 
            <img src="/gallery/photos_soh/3/mmd1.jpg" alt="" /> 
          </div> 
        </div> 
        <div class="footer_news2"> 
          <div class="detal_med"> 
            <div class="title_ded_med">Lime honey 3</div> 
            vintage 2016</div> 
          <div class="look_more"> 
            <a href="/" class="buttom_look">100$</a> 
          </div> 
        </div> 
      </div> 
      <div id="case_news_info"> 
        <div class="head_news"> 
          <div class="content_news2"> 
            <img src="/gallery/photos_soh/2/med.png" alt="" /> 
          </div> 
        </div> 
        <div class="footer_news2"> 
          <div class="detal_med"> 
            <div class="title_ded_med">Пчела-матка 10</div> 
          </div> 
          <div class="look_more"> 
            <a href="/" class="buttom_look">100$</a> 
          </div> 
        </div> 
      </div> 
    </div> 
  </div> 
  <div id="case_case_case"> 
    <div class="case_news"> 
      <div id="case_news_info"> 
        <div class="head_news"> 
          <div class="content_news2"> 
            <img src="/gallery/photos_soh/1/med.png" alt="" /> 
          </div> 
        </div> 
        <div class="footer_news2"> 
          <div class="detal_med"> 
            <div class="title_ded_med">Классный мед</div> 
            Покупай не пожалеешь</div> 
          <div class="look_more"> 
            <a href="/" class="buttom_look">100$</a> 
          </div> 
        </div> 
      </div> 
    </div> 
  </div> 
</div> 
<!-- orange_zone !-->

Answer 1

Блоки сами центрируются

.in{ 
text-align:center; 
width:90%; 
border:2px solid gray; 
background:silver; 
box-shadow:0 0 10pt #727272; 
padding:10pt; 
border-radius:4pt;} 
.block{ 
margin:10pt; 
padding:10pt; 
border:2px solid red; 
border-radius:4pt; 
width:200px; 
height:100px; 
display:inline-block; 
vertical-align: middle;}

<div class="in">  
  <div class="block"></div> 
  <div class="block"></div> 
  <div class="block"></div> 
  <div class="block"></div> 
  <div class="block"></div> 
  <div class="block"></div> 
  <div class="block"></div> 
  <div class="block"></div> 
 
</div>

http://codepen.io/Geyan/pen/dXApNK?editors=110

Answer 2

* { 
  box-sizing: border-box; 
} 
 
body { 
  padding: 5%; 
} 
 
div { 
  display: inline-block; 
  width: 30%; 
  height: 3em; 
  margin: 1.666%; 
  background: silver; 
}

<div> 
  Блок 1 
</div><div> 
  Блок 2 
</div><div> 
  Блок 3 
</div><div> 
  Блок 4 
</div><div> 
  Блок 5 
</div><div> 
  Блок 6 
</div><div> 
  Блок 7 
</div>