Hello. I want to make on the page the withdrawal of goods in blocks, three in a row. and everything would be fine, everything was done. It turned out as it should: enter image description here

But there is one problem. If there are as many goods as necessary so that each product is in a row of three, all is good, but if one row lacks a product, or two, then the product fills the entire row. And it goes like this: enter image description here

How to make each of the goods occupy only its own space, as well as if they are in the same row of three products? I would be grateful for the help!

#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 !-->

  • one
    somehow too many elements use the same id . In principle, the browser does not even guarantee that the styles will be applied to any element except one among those having the same id - Grundy

2 answers 2

The blocks themselves are centered

 .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

  • Is it possible to somehow apply it in my css? - iKey
  • see - my blocks - it will be a wrapper, you will change the styles only for the block with img and for the block with the description, there is not much work - user33274
  • right now check out the link in the orange field - user33274

 * { 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>

  • Is it possible to somehow apply it in my css? - iKey
  • @Denis, unfortunately, I am too lazy to read it ... Try to make a minimal reproducible example , then I will think about it. - Qwertiy ♦