structure


In general, there is such a structure. How to make these lines in the code so that when the resolution is changed they do not float (horizontal lines)? At the moment, the horizontal lines made nth-child to the blocks with the logo. As soon as I change the resolution, it turns porridge.

  • 2
    svg uyuzay and do not worry - Lieutenant Jim Dangle
  • you can still make blocks with border-style: dotted; and arrange them as needed. - Mikl

1 answer 1

Can be done through border-style: dotted . We split the tree into two halves. Add sections from the left and right sides (setting them the same height). The segments are made from a block with zero height. Result:

 * { box-sizing: border-box; } .tree__structure { display: flex; } .tree__half { width: 50%; display: flex; flex-direction: column; } .tree__half--left { border-right: 2px dotted gray; align-items: flex-end; } .tree__half--right { align-items: flex-start; } .tree__root-section { width: 150px; height: 100px; margin: 0 auto; background-color: gray; border-radius: 20px; } .tree__section { display: flex; align-items: center; height: 180px; } .tree__text-item { width: 150px; text-align: justify; } .tree__text-item--special { padding: 10px; border-radius: 20px; background-color: #ccc; } .tree__text-item--left { margin-right: 30px; } .tree__text-item--right { margin-left: 30px; } .tree__dots { width: 100px; height: 0; border-bottom: 2px dotted gray; } .tree__dots + .tree__image-item { margin-left: 30px; } .tree__image-item + .tree__dots { margin-left: 30px; } .tree__dots--left { margin-right: 2px; } .tree__dots--right { margin-left: 2px; } 
 <div class="tree"> <div class="tree__root"> <div class="tree__root-section"> </div> </div> <div class="tree__structure"> <div class="tree__half tree__half--left"> <div class="tree__section"> <div class="tree__text-item tree__text-item--left"> This is some text on the left side. </div> </div> <div class="tree__section"> <div class="tree__image-item"> <img src="http://lorempixel.com/output/nature-qc-100-100-6.jpg" /> </div> <div class="tree__dots tree__dots--left"> </div> </div> </div> <div class="tree__half tree__half--right"> <div class="tree__section"> <div class="tree__dots tree__dots--right"> </div> <div class="tree__image-item"> <img src="http://lorempixel.com/output/nature-qc-100-100-8.jpg" /> </div> </div> <div class="tree__section"> <div class="tree__image-item"> <div class="tree__text-item tree__text-item--special tree__text-item--right"> This is some text on the right side. I will add some words for more content. </div> </div> </div> </div> </div>

  • Thank. But how in this case to put a block with text on the back of the line? position is only obtained, but with it the block remains motionless: ( - Ivan A
  • @IvanA Redid the solution for greater maintainability. - Vadim Ovchinnikov
  • Thank. Truth in safari porridge is obtained: ( - Ivan A
  • @IvanA Look at support for flexobox caniuse.com/#feat=flexbox in Safari. It may also help vendor prefixes for Safari. - Vadim Ovchinnikov
  • @IvanA By the way, here it is not necessary to use flexbox if that. You can, for example, replace the markup through float or inline-block . - Vadim Ovchinnikov