CODEWITHSUNDEEP
htmlcssresponsive-designgrid-layoutaspect-ratio
Simcha
Simcha

Reputation: 3400

CSS height equal to width

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!

-----------------------

Upvotes: 0

Views: 331

Answers (3)

web-tiki
web-tiki

Reputation: 103760

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>

Upvotes: 1

Amir Savand
Amir Savand

Reputation: 384

.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

Upvotes: 0

Panther
Panther

Reputation: 9408

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.

Upvotes: 0

Related Questions