There is a wonderful solution with a family tree on CodePen .

But if the cell has more than one row, they overlap each other from the bottom, and the upper part remains fixed. How can I fix this?

problem screen

*, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } body { min-width: 1200px; margin: 0; padding: 50px; color: #eee9dc; font: 16px Verdana, sans-serif; background: #2e6ba7; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } #wrapper { position: relative; } .branch { position: relative; margin-left: 250px; } .branch:before { content: ""; width: 50px; border-top: 2px solid #eee9dc; position: absolute; left: -100px; top: 50%; margin-top: 1px; } .entry { position: relative; min-height: 60px; } .entry:before { content: ""; height: 100%; border-left: 2px solid #eee9dc; position: absolute; left: -50px; } .entry:after { content: ""; width: 50px; border-top: 2px solid #eee9dc; position: absolute; left: -50px; top: 50%; margin-top: 1px; } .entry:first-child:before { width: 10px; height: 50%; top: 50%; margin-top: 2px; border-radius: 10px 0 0 0; } .entry:first-child:after { height: 10px; border-radius: 10px 0 0 0; } .entry:last-child:before { width: 10px; height: 50%; border-radius: 0 0 0 10px; } .entry:last-child:after { height: 10px; border-top: none; border-bottom: 2px solid #eee9dc; border-radius: 0 0 0 10px; margin-top: -9px; } .entry.sole:before { display: none; } .entry.sole:after { width: 50px; height: 0; margin-top: 1px; border-radius: 0; } .label { display: block; min-width: 150px; padding: 5px 10px; line-height: 20px; text-align: center; border: 2px solid #eee9dc; border-radius: 5px; position: absolute; left: 0; top: 50%; margin-top: -15px; } 
 <html> <body> <div id="wrapper"><span class="label">Root</span> <div class="branch lv1"> <div class="entry"><span class="label">Entry-1<br> 232332<br> wewewe<br> srer </span> <div class="branch lv2"> <div class="entry"><span class="label">Entry-1-1</span> <div class="branch lv3"> <div class="entry"><span class="label">Entry-1-1-1</span></div> <div class="entry"><span class="label">Entry-1-2-1</span></div> </div> </div> <div class="entry"><span class="label">Entry-1-2</span> <div class="branch lv3"> <div class="entry"><span class="label">Entry-1-2-1</span></div> <div class="entry"><span class="label">Entry-1-2-1</span></div> </div> </div> </div> </div> <div class="entry"><span class="label">Entry-2</span> <div class="branch lv2"> <div class="entry"><span class="label">Entry-3-3</span> <div class="branch lv3"> <div class="entry"><span class="label"><span>Entry-1</span></br> <span>232332</span></br> <span>wewewe</span></br> <span>srer</span></br></span></div> <div class="entry"><span class="label">Entry-1<br> 232332<br> wewewe<br> srer</span></div> </div> </div> <div class="entry"><span class="label">Entry-1<br> 232332<br> wewewe<br> srer</span> <div class="branch lv3"> <div class="entry"><span class="label">Entry-3-3-2</span> </div> <div class="entry"><span class="label">Entry-3-3-3</span></div> </div> </div> </div> </div> </div> </div> </body> </html>

  • Set the height of the cells to be larger, for example .entry { min-height: 100px; } .entry { min-height: 100px; } - HamSter

1 answer 1

Blocks with the text .label positioned absolutely, and the parent block .entry stretched by a block with descendants ( .branch ). But when no descendants are specified, the height of the .entry remains the same, and the multi-line .label goes beyond it.

To fix the case, you can, for example, add a class to all the latest .branch and use this class to override the styles for .label .

 .branch.open .label { margin-top: 0; position: relative; }

Unfortunately, if you add a gap between neighboring .label , then gaps appear in the lines. As far as I understand, you need to edit the properties for the pseudo-elements that set them. This is yourself.

 *, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } body { min-width: 1200px; margin: 0; padding: 50px; color: #eee9dc; font: 16px Verdana, sans-serif; background: #2e6ba7; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } #wrapper { position: relative; } .branch { position: relative; margin-left: 250px; } .branch:before { content: ""; width: 50px; border-top: 2px solid #eee9dc; position: absolute; left: -100px; top: 50%; margin-top: 1px; } .entry { position: relative; min-height: 60px; } .entry:before { content: ""; height: 100%; border-left: 2px solid #eee9dc; position: absolute; left: -50px; } .entry:after { content: ""; width: 50px; border-top: 2px solid #eee9dc; position: absolute; left: -50px; top: 50%; margin-top: 1px; } .entry:first-child:before { width: 10px; height: 50%; top: 50%; margin-top: 2px; border-radius: 10px 0 0 0; } .entry:first-child:after { height: 10px; border-radius: 10px 0 0 0; } .entry:last-child:before { width: 10px; height: 50%; border-radius: 0 0 0 10px; } .entry:last-child:after { height: 10px; border-top: none; border-bottom: 2px solid #eee9dc; border-radius: 0 0 0 10px; margin-top: -9px; } .entry.sole:before { display: none; } .entry.sole:after { width: 50px; height: 0; margin-top: 1px; border-radius: 0; } .label { display: block; min-width: 150px; padding: 5px 10px; line-height: 20px; text-align: center; border: 2px solid #eee9dc; border-radius: 5px; position: absolute; left: 0; top: 50%; margin-top: -15px; } .branch.open .label { margin-top: 0; position: relative; } 
 <html> <body> <div id="wrapper"><span class="label">Root</span> <div class="branch lv1"> <div class="entry"><span class="label">Entry-1<br> 232332<br> wewewe<br> srer </span> <div class="branch lv2"> <div class="entry"><span class="label">Entry-1-1</span> <div class="branch lv3"> <div class="entry"><span class="label">Entry-1-1-1</span></div> <div class="entry"><span class="label">Entry-1-2-1</span></div> </div> </div> <div class="entry"><span class="label">Entry-1-2</span> <div class="branch lv3"> <div class="entry"><span class="label">Entry-1-2-1</span></div> <div class="entry"><span class="label">Entry-1-2-1</span></div> </div> </div> </div> </div> <div class="entry"><span class="label">Entry-2</span> <div class="branch lv2"> <div class="entry"><span class="label">Entry-3-3</span> <div class="branch lv3 open"> <div class="entry"><span class="label"><span>Entry-1</span></br> <span>232332</span></br> <span>wewewe</span></br> <span>srer</span></br></span></div> <div class="entry"><span class="label">Entry-1<br> 232332<br> wewewe<br> srer</span></div> </div> </div> <div class="entry"><span class="label">Entry-1<br> 232332<br> wewewe<br> srer</span> <div class="branch lv3"> <div class="entry"><span class="label">Entry-3-3-2</span> </div> <div class="entry"><span class="label">Entry-3-3-3</span></div> </div> </div> </div> </div> </div> </div> </body> </html>