0

I have problem with aligning elemnts in div. I have following div:

<div class="lists-wrapper">
  <div class="list">
   <h4>List 1</h4>         
   <ul>
     <li>item 1</li>
     <li>item 2</li>
     <li>item 3</li>
   </ul>
  </div>  
  <div class="list">
   <h4>List 2</h4>         
   <ul>
     <li>item 1</li>
     <li>item 2</li>
     <li>item 3</li>
     <li>item 4</li>
     <li>item 5</li>
   </ul>
  </div>  
  <div class="list">
   <h4>List 3</h4>         
   <ul>
     <li>item 1</li>
     <li>item 2</li>
     <li>item 3</li>
     <li>item 4</li>
   </ul>
  </div>  
  <div class="list">
   <h4>List 4</h4>         
   <ul>
     <li>item 1</li>
     <li>item 2</li>
     <li>item 3</li>
     <li>item 4</li>
     <li>item 5</li>
   </ul>
  </div>         
</div>

SCSS:

.lists-wrapper {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  .list {
     width: 20%;
  }
  h4 {
    margin-bottom: 22px;
  }
  ul {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    margin-bottom: 35px;
    margin-left: -5px;
  }
}

I'm using React and jquery approaches doesn't work for me The problem is that .list class blocks aligned properly to each other now but when for example h4 width is very long, it splits to the second line and ul doesn't aligned with other ul's in other list blocks because it goes down a bit because of changing the height of h4. I want alignment to work relatively to ul to other ul's in the row, is it possible to do?

rick1
  • 946
  • 3
  • 15
  • 31
  • i don't understand your issue. please add a image and show the your issue. – doğukan Dec 07 '18 at 22:30
  • I am quite confident there's no need for JS here, but I can only guess what OP is trying to achieve, because I have no idea what the actual question was even after reading through it 3-4x. If you have problems with explaining the problem, definitely include a sketch. – nemanja Dec 07 '18 at 22:39
  • 1
    I added image with the problem that I mentioned @NemanjaGlumac – rick1 Dec 07 '18 at 22:40
  • This is one line of css. Add `min-heigth: 40px;` to `h4`. You can determine min-height based on your font-size and line-height. No need for absolute positioning etc. – nemanja Dec 07 '18 at 22:43
  • your codes is wanting. look: https://codepen.io/dgknca/pen/zyOWWB?editors=1000 add the all. – doğukan Dec 07 '18 at 22:43
  • @NemanjaGlumac I cannot use min-height because list-wrapper is responsive, on some screens very long titles is ok, o other's it splited down – rick1 Dec 07 '18 at 22:46
  • Why don't u use table? – Victoria Le Dec 07 '18 at 22:46
  • @DogukanCavus doen't understand – rick1 Dec 07 '18 at 22:46
  • I cannot use table here, number of lists are dynamic – rick1 Dec 07 '18 at 22:47
  • the width can be limited, on some screens there are 5-8 lists in the row, on others it can be 3-4 lists in row – rick1 Dec 07 '18 at 22:48
  • @rick1 then you need to use either overflow with scroll or something like this: https://css-tricks.com/snippets/css/truncate-string-with-ellipsis/ – nemanja Dec 07 '18 at 22:49
  • no I do not need any scroll. Check @zer0 solution, it is almost what I need but it is probably for consistent number of items but not dynamic – rick1 Dec 07 '18 at 23:07
  • Possible duplicate of [How to get header from cards or similar to have the same height with flex box?](https://stackoverflow.com/questions/46596170/how-to-get-header-from-cards-or-similar-to-have-the-same-height-with-flex-box) – ReSedano Dec 08 '18 at 00:08
  • @ReSedano I checked code examples that you send. It isn't duplicate and I didn't find solution there. – rick1 Dec 10 '18 at 09:19
  • @rick1 Ok, it was only a hint to try to help you. – ReSedano Dec 10 '18 at 09:32
  • @ReSedano thank you. I tried to refactore jquery into working react but without success for now. – rick1 Dec 10 '18 at 10:52

0 Answers0