enter image description here

Tried to do: through absolute positioning, setting the width to 101% and shifting by 0.5% to the left, but this is not adaptively obtained. How to be?

  • absolute + right: -1px; left: -1px; bottom: -1px; and do not set the width - Artem Gorlachev
  • @ArtemGorlachev And why not in the answer, but in the comment? Feeling shy? :) - tutankhamun
  • @tutankhamun without a fiddle or snippet is not 100% sure, I prefer to put only exact answers in the answer. And writing a snippet for laziness itself - Artem Gorlachev

3 answers 3

For example:

* { box-sizing: border-box; } .block { border: 1px solid #111; border-radius: 0px 0px 5px 5px; max-width: 10rem; padding: 1rem 0rem 34px; text-align: center; background: #fff; text-transform: uppercase; font-family: sans-serif; position: relative; } .block span { display: block; font-size: 1.5rem; } .btn { display: block; background: #f66001; color: #fff; text-decoration: none; font-size: .65rem; padding: .5rem; position: absolute; z-index: 3; left: -1px; right: -1px; bottom: -1px; border-radius: 0px 0px 5px 5px; } 
 <div class="block"> <div class="inner"> Цена составит <span>320р</span> </div> <a href="#" class="btn">Заказать укладку</a> </div>

PS: Maybe you have set overflow: hidden; it interferes.

Or another such option:

 * { box-sizing: border-box; } .block { border: 1px solid #111; border-bottom: 0; max-width: 10rem; padding: 1rem; text-align: center; background: #fff; text-transform: uppercase; font-family: sans-serif; position: relative; font-size: .9rem; } .block span { display: block; font-size: 1.5rem; } .btn { display: block; text-align: center; max-width: 10rem; background: #f66001; color: #fff; text-decoration: none; font-size: .65rem; padding: .5rem; border-radius: 0px 0px 5px 5px; } 
 <div class="block"> <div class="inner"> Цена составит <span>320р</span> </div> </div> <a href="#" class="btn">Заказать укладку</a>

    A simple sketch:

     .block1 { width:150px; border:1px solid black; text-align:center; height: 100px; } .block2 { background: orange; position: relative; left: -1px; width: 152px; padding: 10px 0px 10px 0px; margin-top: 45px; } 
     <div class="block1"> 300 руб <div class="block2"> Заказать </div> </div>

    • @ElenaSemenchenko, you do not need to edit the messages so that the result of the code changes from your edits! - Visman September
    • @Visman, and what did I fix that, that the answer has changed? - HamSter
    • @ElenaSemenchenko, the original code is jsfiddle.net/Legionary/xrm9c1hz/1 , your version is jsfiddle.net/xrm9c1hz It appears completely differently: the author of the answer looks like what the author of the question needs, but what you wrote is completely different. on what the questioner needs. - Visman September
    • @Visman, thanks! I apologize! - HamSter

    What you are talking about in the question is not adaptability, it is rubberiness, so to speak. With adaptability, the blocks will not decrease in size, but will be rebuilt on the page, taking into account the available space, so the option with position: absolute or position: relative will do for you.

    If you need to reduce the blocks in size, you will need to use media queries.

    Here you have a rough example:

     .box { max-width: 200px; height: 100px; border: 1px solid gray; text-align: center; border-bottom: none; position: relative; } .btn { display: block; width: 200px; height: 30px; background: orange; line-height: 30px; position: absolute; bottom: -5px; left: -1px; border: 1px solid orange; border-radius: 0px 0px 5px 5px; } 
     <div class="box"> <p class="text">Цена составит</p> <p class="price">320 р</p> <a class="btn" href="#">Заказать укладку</a> </div>

    I think the idea is clear.