CODEWITHSUNDEEP
htmlcss
waterflame
waterflame

Reputation: 23

CSS column-count 3 makes a single column

I'm trying to get it so that the boxes would line up vertically/to the right(then down). I know this isn't the best method. But I assumed it'd work like it normally does with text. Any help or pointers in the right direction would be appreciated.

.container {
  border: solid;
  width:740px;
}

.list ul{
  list-style-type:none;
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;
}

.list li{
  max-height:245px;
  width:139px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}

.list li img {
  max-width:100%;
}
<!DOCTYPE html>
<html>
<body>
<div class="container">
    <ul class="list">
        <li><img src="https://i.imgur.com/5As9TeZ.jpg"><br>Lorem ipsum is placeholder text commonly</li>
        <li><img src="https://i.imgur.com/5As9TeZ.jpg"><br>Lorem ipsum</li>
        <li><img src="https://i.imgur.com/5As9TeZ.jpg"><br>commodo consequat</li>
    </ul>
    </div>
</body>
</html>

Upvotes: 0

Views: 84

Answers (1)

Dan Mullin
Dan Mullin

Reputation: 4435

You've got an error in your CSS selector for your <ul>

You're selecting .list ul when your intention is ul.list

.container {
  border: solid;
  width: 740px;
}

ul.list {
  list-style-type: none;
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;
}

.list li {
  max-height: 245px;
  width: 139px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}

.list li img {
  max-width: 100%;
}
<!DOCTYPE html>
<html>

<body>
  <div class="container">
    <ul class="list">
      <li><img src="https://i.imgur.com/5As9TeZ.jpg"><br>Lorem ipsum is placeholder text commonly</li>
      <li><img src="https://i.imgur.com/5As9TeZ.jpg"><br>Lorem ipsum</li>
      <li><img src="https://i.imgur.com/5As9TeZ.jpg"><br>commodo consequat</li>
    </ul>
  </div>
</body>

</html>

Upvotes: 1

Related Questions