Home>

Hello everyone! There is such a layout.

Text

As you can see, the image is halfway outside the container. I have been struggling with this task for more than an hour, but I cannot achieve the desired result. I've already tried andimgshove it into a container, and then using the functionleft: calc ();to bring it out, and to place it outside the container -nothing helps. Look, pzhsta, my code? Where did I step? Or did I not implement the idea correctly at all?

.giftset-box {
  display: flex;
  flex-wrap: wrap;
  margin-top: 70px;
}
.giftset-box img {
  position: relative;
  left: calc (100% -409/2);
}
.giftset-text {
  background-color: white;
  max-width: 790px;
  padding: 90px;
  border-radius: 5px;
  -webkit-box-shadow: 0px 5px 10px 2px rgba (34, 60, 80, 0.2);
  -moz-box-shadow: 0px 5px 10px 2px rgba (34, 60, 80, 0.2);
  box-shadow: 0px 5px 10px 2px rgba (34, 60, 80, 0.2);
} 
<
section id= "giftset" class= "giftset" >
  <
div class= "section-title" >
    <
p >
Best Gift For Best Friend <
/p >
    <
h2 >
GIFTSET <
/h2 >
  <
/div >
  <
div class= "giftset-box" >
    <
img src= "img /pr-0018-r.png" alt= "gift" >
    <
div class= "giftset-text" >
      <
p class= "price" >
285.000 <
/p >
      <
h4 >
Giftset "Cà phê phin Việt Nam" <
/h4 >
      <
p class= "card-ingridients" >
Món quà tuyệt vời dành cho người sành cà phê. Hạt cà phê được Revo cẩn trọng chọn lựa, rang xay theo công nghệ và bí quyết học hỏi từ những nghệ nhân nổi tiếng, cùng với tình yêu tin ká ph cámàê lựa a nghệ
        chỉ dành riêng cho bạn. <
/p >
    <
/div >
  <
/div >
<
/section >

position: absolute

Andrey Freiz2021-10-19 03:30:12

It wouldn't be bad if there was more information. I can advise you to look at what relative is bound to, perhaps because of it there is no way to take the block away, as a last resort you can use transform and apply it, a crutch, of course, but if there is no other way ...

Серега Мангышев2021-10-19 03:30:12

transform: tranlsateX (-60%);

Pavel Nazarian2021-10-18 05:02:48
  • Answer # 1

    I would wrap the picture and give it to the picture relative to this wrapperposition: absolute; right: 0;, then the picture would have already applied the appearance of the one on the layout.

    .giftset-box {
      display: flex;
        max-width: 500px;
      margin: 70px auto 0;
        background-color: white;
      border-radius: 5px;
        box-shadow: 0px 5px 10px 2px rgba (34, 60, 80, 0.2);
    }
    .giftset-image {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        width: 25%;
        height: auto;
        position: relative;
    }
    .giftset-image img {
      display: block;
      max-width: 300px; /* Because the picture is set to absolute, then it will stretch for its entire size, so we will limit it to the maximum for the layout * /
        max-height: 100%;
        margin-bottom: -35%; /* Approximate shadow bottom indent * /
        object-fit: contain;
        position: absolute;
        right: 0;
    }
    .giftset-text {
      width: 80%;
      padding: 20px 40px;
        box-sizing: border-box;
    } 
    <
    section id= "giftset" class= "giftset" >
      <
    div class= "section-title" >
        <
    p >
    Best Gift For Best Friend <
    /p >
        <
    h2 >
    GIFTSET <
    /h2 >
      <
    /div >
      <
    div class= "giftset-box" >
        <
    div class= "giftset-image" >
          <
    img src= "//i.imgur.com/60rpeK9.png" alt= "gift" >
        <
    /div >
        <
    div class= "giftset-text" >
          <
    p class= "price" >
    285.000 <
    /p >
          <
    h4 >
    Giftset "Cà phê phin Việt Nam" <
    /h4 >
          <
    p class= "card-ingridients" >
    Món quà tuyệt vời dành cho người sành cà phê. Hạt cà phê được Revo cẩn trọng chọn lựa, rang xay theo công nghệ và bí quyết học hỏi từ những nghệ nhân nổi tiếng, cùng với tình yêu tin ká ph cámàê lựa a nghệ
            chỉ dành riêng cho bạn. <
    /p >
        <
    /div >
      <
    /div >
    <
    /section >
    

    thanks a lot) helped

    Yulia2021-10-18 09:23:35