0

I'm creating a portfolio with different height items. Each item is an inline-block div with a fixed width. So, I got 4 items in each row. I've aligned them vertically to top and it's fine so far. The problem begins since the 2nd row. I need each item to be aligned regarding to its upper item, not the row. I'd like to do it by pure CSS right in my styles codes. Hopefully, no using plugin, library or pre-maid code. See the image to find out more about my meaning.

enter image description here

The code I got is as below. HTML (by PHP):

<div class="portfolio">
    <?php foreach($portfolio as $work) : ?>
        <div class="work">
            <div class="work-image">
                <img src="images/<?php echo $work[0]; ?>" alt="<?php echo $work[1]; ?>">
                <h5 class="work-title"><?php echo $work[1]; ?></h5>
            </div>

            <div class="work-description">
                <?php echo $work[2]; ?>
            </div>
            <div class="work-tech">
                <h5><?php echo $lang['TECHNOLOGIES']; ?></h5>
                <ul>
                <?php foreach($work[4] as $tech) : ?>
                    <li class="tech-item"><span class="fa fa-check"></span> <?php echo $tech; ?></li>
                <?php endforeach; ?>
                </ul>
            </div>
        </div>
    <?php endforeach; ?>
</div>

CSS (by LESS):

#portfolio {
    background: url('../images/portfolio-bg.jpg') repeat-y center top;
    background-attachment: fixed;
    .portfolio {
        text-align: center;
        .work {
            display: inline-block;
            width: 280px;
            margin: 5px;
            padding: 0;
            vertical-align: top;
            background: green;
            .work-image {
                position: relative;
                width: 100%;
                height: 186px;
                overflow: hidden;
                background: black;
                img {

                }
                .work-title {
                    position: absolute;
                    bottom: 10px;
                    left: 0;
                    right: 0;
                    margin: 0 auto;
                    color: red;
                }
            }
            .work-description {
                padding: 15px;
                font-size: 14px;
                text-align: justify;
            }
            .work-tech {
                padding: 15px;
                text-align: left;
                h5 {
                    margin-bottom: 10px;
                }
            }
        }
    }
}
Arashtad
  • 154
  • 11
  • 1
    possible solution: http://stackoverflow.com/questions/9119347/html-css-vertical-flow-layout-columnar-style-how-to-implement – cdm Jan 27 '17 at 07:36
  • Use columns instead of rows or use Masonry plugin. – Mohammad Usman Jan 27 '17 at 07:36
  • Both answers refer me to use the float property. I wouldn't like to use it because I'd like the items to be aligned center as well. But if I got no choice, I'll use the code that I've written based on Mansory before. https://github.com/arashtad/Arashtad-Masonry-Flippers – Arashtad Jan 27 '17 at 07:41
  • Why don't you use [Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)? – Faegy Jan 27 '17 at 10:02

0 Answers0