0

Hi I have number of responsive square block elements inside of container. Every block has next css:

.thumbWrapper {
 display: inline-block;
 min-width: 64px;
 max-width: 128px;
 width: 23%;
 margin: 2px;
 position: relative;
 z-index: 15;
}

Number of blocks for example 30. I put them in the container in one row, so if they not are placing in one row, part of them are moving into the next row and etc. My goal is to show to user no more then 2 rows of them. How can I do it? P.S. I could use overflow: hidden; property for container, but I don't know exact height of container, because it responsive depends on content blocks.

Using just css, without JS

Example:

-----------------------
 __  __  __  __
 |_| |_| |_| |_|
 __  __  __  __
 |_| |_| |_| |_|
 __  __  __ 
 |_| |_| |_|                      <------------- This row should be hidden!

-----------------------
web-tiki
  • 99,765
  • 32
  • 217
  • 249
Simcha
  • 3,300
  • 7
  • 29
  • 42
  • possible duplicate of [Height equal to dynamic width (CSS fluid layout)](http://stackoverflow.com/questions/5445491/height-equal-to-dynamic-width-css-fluid-layout) or http://stackoverflow.com/questions/1495407/css-a-way-to-maintain-aspect-ratio-when-resizing-a-div – web-tiki Sep 17 '14 at 12:00
  • Yes, I read it, but I need just using CSS, without JS. – Simcha Sep 17 '14 at 12:03
  • Both links provide CSS only solutions. – web-tiki Sep 17 '14 at 12:04
  • You can also do something like this : http://jsfiddle.net/og8h2x5n/ – web-tiki Sep 17 '14 at 12:05
  • Not exactly... I successfully put them like I wanted, the issue here, that I need to hide all blocks that not are placing in 2 rows... – Simcha Sep 17 '14 at 12:11
  • ok, I understand your aim now. How are you etting the height of the block? are they addapting toi theire content or are you setting a specific height to them? – web-tiki Sep 17 '14 at 12:15
  • yes, I have square image inside of them, so they have width in %, and height according square image, so it eqivalen to width. – Simcha Sep 17 '14 at 12:19

3 Answers3

1

You may do this :

fiddle

body, html {
    height:100%;
    margin:0;
}
.wrap1 {
    height:0;
    padding-bottom:46%;
    position:relative;
}
.wrap2 {
    position:absolute;
    top:0;
    left:0;
    height:100%;
    width:100%;
    max-height:264px;
    min-height:136px;
    overflow:hidden;
}
.wrap2 div {
    display: inline-block;
    min-width: 64px;
    max-width: 128px;
    width: 23%;
    margin: 2px;
    position: relative;
    z-index: 15;
    background:teal;
}
div>img {
    width:100%;
    height:auto;
    display:block;
}
<div class="wrap1">
    <div class="wrap2">
        <div>
            <img src="http://lorempixel.com/output/people-q-g-100-100-1.jpg" alt="" />
        </div>
        <div>
            <img src="http://lorempixel.com/output/people-q-g-100-100-1.jpg" alt="" />
        </div>
        <div>
            <img src="http://lorempixel.com/output/people-q-g-100-100-1.jpg" alt="" />
        </div>
        <div>
            <img src="http://lorempixel.com/output/people-q-g-100-100-1.jpg" alt="" />
        </div>
        <div>
            <img src="http://lorempixel.com/output/people-q-g-100-100-1.jpg" alt="" />
        </div>
        <div>
            <img src="http://lorempixel.com/output/people-q-g-100-100-1.jpg" alt="" />
        </div>
        <div>
            <img src="http://lorempixel.com/output/people-q-g-100-100-1.jpg" alt="" />
        </div>
        <div>
            <img src="http://lorempixel.com/output/people-q-g-100-100-1.jpg" alt="" />
        </div>
        <div>
            <img src="http://lorempixel.com/output/people-q-g-100-100-1.jpg" alt="" />
        </div>
        <div>
            <img src="http://lorempixel.com/output/people-q-g-100-100-1.jpg" alt="" />
        </div>
        <div>
            <img src="http://lorempixel.com/output/people-q-g-100-100-1.jpg" alt="" />
        </div>
        <div>
            <img src="http://lorempixel.com/output/people-q-g-100-100-1.jpg" alt="" />
        </div>
        <div>
            <img src="http://lorempixel.com/output/people-q-g-100-100-1.jpg" alt="" />
        </div>
        <div>
            <img src="http://lorempixel.com/output/people-q-g-100-100-1.jpg" alt="" />
        </div>
        <div>
            <img src="http://lorempixel.com/output/people-q-g-100-100-1.jpg" alt="" />
        </div>
        <div>
            <img src="http://lorempixel.com/output/people-q-g-100-100-1.jpg" alt="" />
        </div>
        <div>
            <img src="http://lorempixel.com/output/people-q-g-100-100-1.jpg" alt="" />
        </div>
        <div>
            <img src="http://lorempixel.com/output/people-q-g-100-100-1.jpg" alt="" />
        </div>
        <div>
            <img src="http://lorempixel.com/output/people-q-g-100-100-1.jpg" alt="" />
        </div>
        <div>
            <img src="http://lorempixel.com/output/people-q-g-100-100-1.jpg" alt="" />
        </div>
        <div>
            <img src="http://lorempixel.com/output/people-q-g-100-100-1.jpg" alt="" />
        </div>
        <div>
            <img src="http://lorempixel.com/output/people-q-g-100-100-1.jpg" alt="" />
        </div>
        <div>
            <img src="http://lorempixel.com/output/people-q-g-100-100-1.jpg" alt="" />
        </div>
        <div>
            <img src="http://lorempixel.com/output/people-q-g-100-100-1.jpg" alt="" />
        </div>
        <div>
            <img src="http://lorempixel.com/output/people-q-g-100-100-1.jpg" alt="" />
        </div>
        <div>
            <img src="http://lorempixel.com/output/people-q-g-100-100-1.jpg" alt="" />
        </div>
        <div>
            <img src="http://lorempixel.com/output/people-q-g-100-100-1.jpg" alt="" />
        </div>
        <div>
            <img src="http://lorempixel.com/output/people-q-g-100-100-1.jpg" alt="" />
        </div>
        <div>
            <img src="http://lorempixel.com/output/people-q-g-100-100-1.jpg" alt="" />
        </div>
        <div>
            <img src="http://lorempixel.com/output/people-q-g-100-100-1.jpg" alt="" />
        </div>
        <div>
            <img src="http://lorempixel.com/output/people-q-g-100-100-1.jpg" alt="" />
        </div>
        <div>
            <img src="http://lorempixel.com/output/people-q-g-100-100-1.jpg" alt="" />
        </div>
        <div>
            <img src="http://lorempixel.com/output/people-q-g-100-100-1.jpg" alt="" />
        </div>
        <div>
            <img src="http://lorempixel.com/output/people-q-g-100-100-1.jpg" alt="" />
        </div>
        <div>
            <img src="http://lorempixel.com/output/people-q-g-100-100-1.jpg" alt="" />
        </div>
        <div>
            <img src="http://lorempixel.com/output/people-q-g-100-100-1.jpg" alt="" />
        </div>
        <div>
            <img src="http://lorempixel.com/output/people-q-g-100-100-1.jpg" alt="" />
        </div>
        <div>
            <img src="http://lorempixel.com/output/people-q-g-100-100-1.jpg" alt="" />
        </div>
        <div>
            <img src="http://lorempixel.com/output/people-q-g-100-100-1.jpg" alt="" />
        </div>
        <div>
            <img src="http://lorempixel.com/output/people-q-g-100-100-1.jpg" alt="" />
        </div>
    </div>
</div>
web-tiki
  • 99,765
  • 32
  • 217
  • 249
0

You can do this in javascript. If you have 30 blocks then one row will have max 15 blocks, calculate the width of first 15 block and set the width of the row to the sum of them. This would make it overflow on X direction so user have to scroll to view the hidden.

Panther
  • 8,938
  • 3
  • 23
  • 34
  • ammm... No, I mean that I need to show not all of items, I need to show, just 2 rows for example if there placing just 6 blocks, so I will show only 6 blocks and other will be hidden. And I want to do it just using css – Simcha Sep 17 '14 at 12:01
0
.block_list {
    width: 100%;
    max-height: 128px;
    overflow-y: hidden;
}

.a_block {
    height: 64px;
}

Also use padding not margin unless you add the margin value to the .block_list's height

Amir Savand
  • 365
  • 5
  • 13
  • 1
    But according this solution, if responsive blocks will be 64px, there will be more than 2 rows... I added image to the task. – Simcha Sep 17 '14 at 12:16
  • Ok, but they a re responsive so if there height will be 128px, so there will be just 1 row, because of: min-width: 64px; max-width: 128px; width: 23%; They are dynamic because height are changing according a width – Simcha Sep 17 '14 at 12:21
  • @Simha you can limit their height or their content... or if they became 128 px let it be one row... if you want a good answer try make it in a Jsfiddle ... :/ – Amir Savand Sep 17 '14 at 12:26