Репозиционирование <div>на css - PullRequest
Новая
       30

Репозиционирование <div>на css

0 голосов
/ 02 августа 2020

У меня есть эта разметка, созданная с помощью html / css, я пытаюсь изучить адаптивный веб-дизайн, проблема в том, что мне нужно сделать раздел купона и текст рядом с ним go ниже не сбоку. Попытался настроить CSS но ничего не работает. Мы будем благодарны за любые предложения и помощь, если размер экрана составляет 768 пикселей или больше. Спасибо.

enter image description here

here's the codes: https://codepen.io/RXCRDVZ/pen/zYrgMwx

@media screen and (min-width: 1024px) {
.main-wrapper {
    flex-direction: row;
}
.additional-info {
    display: flex;
    flex-direction: column;
}
.brand-header-box {
    width: 638px;
    height: 167px;
}
.brand-image-wrapper {
    width: 263px;
    height: 270px;
}
.additional-info {
    width: 263px;
}
.brand-logo img {
    margin-top: 76px;
    margin-bottom: 40px;
    width: 110px;
}
.brand-header-box-img img {
    width: 290px;
    height: 170px;
    margin: 0;
}
.brand-header-box-text {
    font-size: 23px;
    width: 312px;
    text-align: left;
}
.brand-header-box-button {
    margin: 0;
}
.brand-header-name {
    text-align: left;
}
.page-wrapper {
    width: 917px;
}

1 Ответ

0 голосов
/ 02 августа 2020

Чтобы раздел купона и текст рядом с ним отображались в другой строке, задайте свойство .brand-wrapper a flex-wrap: wrap, а затем присвойте flex:1 его дочерним элементам. Вот рабочий пример. 

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Roboto:wght@400;500;700&display=swap');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.page-wrapper {
  width: 90%;
  margin: 42px auto 0;
}

.brand-wrapper {
  display: flex;
  margin-bottom: 25px;
  flex-direction: column;
}

.brand-image-wrapper {
  background: #FFFFFF;
  border: 0.78626px solid #DADDE2;
  border-radius: 3.9313px;
  width: 263px;
  height: 263px;
  align-items: center;
  margin: 0 auto;
}

.brand-image-content {
  display: flex;
  justify-content: space-evenly;
  flex-direction: column;
  align-items: center;
}

.brand-logo img {
  margin-top: 76px;
  margin-bottom: 40px;
  width: 140px;
  height: 45px;
}

.brand-cashback {
  margin-top: 19px;
}

.view-store {
  background: #2C9E25;
  border-radius: 5px;
  font-family: Montserrat;
  font-style: normal;
  font-weight: bold;
  font-size: 14px;
  line-height: 17px;
  text-align: center;
  letter-spacing: 0.3px;
  text-transform: capitalize;
  color: #FFFFFF;
  border: none;
  width: 181px;
  height: 39px;
}

.brand-cashback {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 500;
  font-size: 15px;
  line-height: 120%;
  text-align: center;
  letter-spacing: -0.188889px;
  color: #29343C;
}

.brand-header-name {
  font-family: "Roboto";
  font-style: normal;
  font-weight: bold;
  line-height: 46px;
  color: #374B5A;
  font-size: 18px;
  text-align: center;
}

.brand-header-offers {
  display: flex;
  justify-content: space-between;
  width: 240px;
  font-family: Roboto;
  font-style: normal;
  font-weight: normal;
  font-size: 11px;
  line-height: 21px;
  color: #62707B;
  margin-bottom: 21px;
  margin-top: 9px;
  margin: 9px auto 21px;
}

.brand-header-box {
  background: #FFFFFF;
  border: 1px solid #DADDE2;
  box-sizing: border-box;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 263px;
  height: 290px;
  margin: 0 auto 30px;
}

.brand-header-box-img {
  margin: -4px;
}

.brand-header-box-img img {
  width: 160px;
  height: 180px;
}

.brand-header-box-content {
  display: flex;
  border-bottom-right-radius: 3.9313px;
  border-bottom-left-radius: 3.9313px;
  flex-direction: column;
  justify-content: center;
  width: 263px;
  height: 283px;
}

.brand-header-box-label {
  font-family: Montserrat;
  font-style: normal;
  font-weight: bold;
  font-size: 15px;
  line-height: 120%;
  display: flex;
  letter-spacing: 0.4px;
  text-transform: capitalize;
  color: #141920;
  width: 204px;
}

.brand-header-price {
  display: flex;
  align-items: center;
  text-align: left;
}

.old-price {
  font-family: Montserrat;
  font-style: normal;
  font-weight: bold;
  font-size: 12px;
  line-height: 140%;
  letter-spacing: 0.4px;
  text-decoration-line: line-through;
  text-transform: capitalize;
  color: #6C6C6C;
  margin-right: 5px;
}

.new-price {
  font-family: Montserrat;
  font-style: normal;
  font-weight: bold;
  font-size: 16px;
  line-height: 140%;
  letter-spacing: 0.4px;
  text-transform: capitalize;
  color: #141920;
}

.brand-header-description {
  font-family: Roboto;
  font-style: normal;
  font-weight: normal;
  font-size: 12px;
  line-height: 150%;
  display: flex;
  align-items: center;
  letter-spacing: 0.4px;
  text-transform: capitalize;
  color: #141920;
  margin-bottom: 10px;
}

.brand-header-box-button {
  background: #FFFFFF;
  border-radius: 5px;
  font-family: Montserrat;
  font-style: normal;
  font-weight: bold;
  font-size: 14px;
  line-height: 17px;
  text-align: center;
  letter-spacing: 0.3px;
  text-transform: capitalize;
  color: #2C9E25;
  border: none;
  width: 205px;
  height: 39px;
  margin: 0 auto;
}

.additional-info {
  margin-top: 50px;
  width: 263px;
  margin: 50px auto 0;
}

.additional-info-contents {
  margin-bottom: 28px;
  margin: 0 auto;
  width: 263px;
}

.addtional-info-title {
  font-family: Roboto;
  font-style: normal;
  font-weight: bold;
  font-size: 20px;
  line-height: 24px;
  letter-spacing: 0.5px;
  color: #899197;
  margin-bottom: 29px;
  margin: 0 auto 20px;
}

.title {
  font-family: Roboto;
  font-style: normal;
  font-weight: bold;
  font-size: 20px;
  line-height: 21px;
  color: #B1B1B1;
  margin-bottom: 10px;
}

.content {
  font-family: Roboto;
  font-style: normal;
  font-weight: normal;
  font-size: 13px;
  line-height: 21px;
  color: #B1B1B1;
  margin-bottom: 20px;
}

.divider {
  border: 1px solid #DADDE2;
  width: 162px;
  margin-bottom: 30px;
}

.macys {
  display: flex;
  flex-direction: column;
  font-family: Roboto;
  font-style: normal;
  font-weight: bold;
  font-size: 18px;
  line-height: 25px;
  letter-spacing: 0.5px;
  text-decoration-line: underline;
  color: #899197;
}

.macys span {
  margin-bottom: 14px;
}

.return-policy-title {
  font-family: Roboto;
  font-style: normal;
  font-weight: bold;
  font-size: 20px;
  line-height: 24px;
  letter-spacing: 0.5px;
  color: #899197;
  margin-bottom: 17px;
}

.return-policy-text {
  font-family: Roboto;
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  line-height: 21px;
  color: #B1B1B1;
  margin-bottom: 19px;
}

.macys-cashback {
  display: flex;
  flex-direction: column;
  font-family: Roboto;
  font-style: normal;
  font-weight: bold;
  font-size: 18px;
  line-height: 25px;
  letter-spacing: 0.5px;
  text-decoration-line: underline;
  color: #899197;
}

.offer-wrapper {
  background: #FFFFFF;
  border: 1px solid #DADDE2;
  box-sizing: border-box;
  border-radius: 5px;
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 263px;
  height: 263px;
  margin-bottom: 25px;
  margin-left: 31px;
  margin: 0 auto 25px;
  text-align: center;
  padding: 20px;
}

.offer-discount {
  font-family: Roboto;
  font-style: bold;
  font-weight: 500;
  font-size: 39px;
  line-height: 49px;
  letter-spacing: 5px;
  color: #7ED321;
  display: flex;
}

.offer-description p {
  font-family: Roboto;
  font-style: normal;
  font-weight: bold;
  font-size: 15px;
  line-height: 21px;
  letter-spacing: 0.45px;
  color: #374B5A;
  width: 252px;
  margin-bottom: 20px;
}

.offer-description span {
  font-family: Roboto;
  font-style: normal;
  font-weight: 500;
  font-size: 15px;
  line-height: 23px;
  color: #62707B;
}

.main-wrapper {
  display: flex;
  flex-direction: column-reverse;
}

.coupon-revealed-background {
  background: #F5FFF4;
  border: 2px dashed #2C9E25;
  box-sizing: border-box;
  border-radius: 4px;
  width: 184px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.coupon-background {
  background: #F5FFF4;
  border: 2px solid #2C9E25;
  box-sizing: border-box;
  border-radius: 4px;
  width: 184px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.view-deal-background {
  background: #2C9E25;
  border: 2px solid #2C9E25;
  box-sizing: border-box;
  border-radius: 4px;
  width: 184px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.offer-button-wrapper .coupon-revealed {
  font-family: Montserrat;
  font-style: normal;
  font-weight: bold;
  font-size: 14px;
  line-height: 17px;
  text-align: center;
  letter-spacing: 0.51px;
  text-transform: uppercase;
  color: #2C9E25;
  text-decoration: none;
}

.offer-button-wrapper .coupon {
  font-family: Montserrat;
  font-style: normal;
  font-weight: bold;
  font-size: 14px;
  line-height: 17px;
  text-align: center;
  letter-spacing: 0.51px;
  text-transform: uppercase;
  color: #2C9E25;
  text-decoration: none;
  position: relative;
  text-transform: capitalize;
}

.offer-button-wrapper .coupon:before {
  content: '';
  position: absolute;
  top: 0;
  right: -92px;
  border-top: 10px solid #E2E2E2;
  border-bottom: 10px solid #2C9E25;
  border-right: 10px solid #E2E2E2;
  border-left: 10px solid #2C9E25;
  border-top-right-radius: 5px;
  border-bottom-left-radius: 5px;
  z-index: 1;
}

.offer-button-wrapper .viewDeal {
  font-family: Montserrat;
  font-style: normal;
  font-weight: bold;
  font-size: 14px;
  line-height: 17px;
  text-align: center;
  letter-spacing: 0.51px;
  text-transform: uppercase;
  color: white;
  text-decoration: none;
  text-transform: capitalize;
}

.twenty {
  color: #F7557E;
}

.seven {
  color: #FF9400;
}

.fifteen {
  color: #00CBE9;
}

.addsavings-wrapper {
  background: #FFFFFF;
  border: 1px dashed #ADB8C0;
  border-radius: 5px;
  width: 263px;
  height: 370px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  margin: 0 auto 20px;
  text-align: center;
}

.addsavings-image img {
  width: 263px;
  height: auto;
}

.activateSavings {
  background: #F5FFF4;
  border: 2px solid #2C9E25;
  box-sizing: border-box;
  border-radius: 5px;
  font-family: Montserrat;
  font-style: normal;
  font-weight: bold;
  font-size: 14px;
  line-height: 17px;
  letter-spacing: 0.51px;
  text-transform: capitalize;
  color: #2C9E25;
  width: 177px;
  height: 40px;
  display: flex;
  align-items: center;
  padding: 20px;
  margin-bottom: 35px;
}

.label {
  font-family: Roboto;
  font-style: normal;
  font-weight: bold;
  font-size: 32px;
  line-height: 57px;
  color: #62707B;
}

.description {
  font-family: Roboto;
  font-style: normal;
  font-weight: normal;
  font-size: 15px;
  line-height: 22px;
  color: #62707B;
  width: 253px;
  margin-bottom: 20px;
}

.headline-section {
  width: 263px;
  height: 583px;
  background: #F9F9F9;
  border-radius: 5px;
  padding: 32px;
  box-sizing: border-box;
  margin-left: 31px;
  margin-bottom: 139px;
  margin: 0 auto;
}

.headline-contents {
  margin: 0 auto;
}

.headline-label {
  font-family: Montserrat;
  font-style: normal;
  font-weight: bold;
  font-size: 18px;
  line-height: 130%;
  letter-spacing: 0.4px;
  text-transform: capitalize;
  color: #899197;
  margin-bottom: 20px;
  margin: 0 auto 20px;
}

.headline-description {
  font-family: Roboto;
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  line-height: 150%;
  letter-spacing: 0.3px;
  color: #899197;
  width: 220px;
}

.headline-description p {
  width: 220px;
  margin: 0 auto;
}

.headline-list {
  font-family: Roboto;
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  line-height: 150%;
  letter-spacing: 0.3px;
  color: #62707B;
  margin-left: 22px;
  width: 455px;
  position: absolute;
}

.headline-list li {
  margin-bottom: 5px;
}


/* .headline-list li:before {
  content: "";
  border-color: transparent #ACACAC;;
  border-style: solid;
  border-width: 0.35em 0 0.35em 0.45em;
  display: block;
  height: 0;
  width: 0;
  left: -1em;
  top: 17px;
  position: relative;
  transform: rotate(90deg);
} */

@media screen and (min-width: 414px) {
  .brand-image-wrapper,
  .brand-header-box,
  .addsavings-wrapper,
  .offer-wrapper,
  .headline-section {
    width: 328px;
  }
  .brand-header-box-img img {
    width: 180px;
  }
  .brand-header-box-content {
    height: 160px;
    width: 327px;
  }
}

@media screen and (min-width: 768px) {
  .page-wrapper {
    width: 613px;
    display: flex;
  }
  .brand-wrapper {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .brand-image-wrapper {
    width: 210px;
    height: 270px;
    justify-content: center;
    margin: 0;
    flex: 1;
  }
  .brand-header-wrapper {
    margin-left: 10px;
    justify-content: space-between;
    flex: 1;
  }
  .brand-header-box {
    flex-direction: row;
    margin-left: 10px;
    width: 425px;
    justify-content: center;
    align-items: center;
    height: 152px;
  }
  .brand-header-box-img img {
    width: 200px;
    margin-bottom: 0;
    height: 100px;
  }
  .brand-header-name {
    font-size: 30px;
  }
  .brand-header-offers {
    margin: 10px 0 41px 10px;
    font-size: 15px;
    width: 300px;
  }
  .offer-wrapper {
    width: 636px;
    height: 149px;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
  }
  .offer-discount {
    flex-direction: column;
    font-size: 39px;
  }
  .offer-description p {
    width: 290px;
    text-align: left;
  }
  .offer-description span {
    margin: 0;
  }
  .coupon-revealed-background,
  .coupon-background,
  .view-deal-background {
    width: 146px;
  }
  .offer-button-wrapper .coupon:before {
    content: '';
    position: absolute;
    top: 0;
    right: -73px;
    border-top: 15px solid #E2E2E2;
    border-left: 15px solid #2C9E25;
    width: 0;
    z-index: 1;
  }
  .addsavings-wrapper {
    width: 636px;
    height: 195px;
    flex-direction: row;
    text-align: left;
  }
  .addsavings-image img {
    width: 200px;
  }
  .activateSavings {
    width: 146px;
  }
  .description {
    width: 207px;
  }
  .headline-section {
    width: 636px;
    height: 300px;
  }
  .headline-description p {
    width: 540px;
  }
  .additional-info {
    display: flex;
    width: 636px;
    justify-content: space-between;
    align-items: flex-start;
  }
  .divider {
    display: none;
  }
  .section1,
  .section2,
  .section3 {
    width: 200px;
  }
  .content {
    width: 200px;
  }
  */
}

@media screen and (min-width: 1024px) {
  .main-wrapper {
    flex-direction: row;
    flex: 1;
  }
  .additional-info {
    display: flex;
    flex-direction: column;
  }
  .brand-header-box {
    width: 638px;
    height: 167px;
  }
  .brand-image-wrapper {
    width: 263px;
    height: 270px;
  }
  .additional-info {
    width: 263px;
  }
  .brand-logo img {
    margin-top: 76px;
    margin-bottom: 40px;
    width: 110px;
  }
  .brand-header-box-img img {
    width: 290px;
    height: 170px;
    margin: 0;
  }
  .brand-header-box-text {
    font-size: 23px;
    width: 312px;
    text-align: left;
  }
  .brand-header-box-button {
    margin: 0;
  }
  .brand-header-name {
    text-align: left;
  }
  .page-wrapper {
    width: 917px;
  }
}
<div class="page-wrapper">
  <div class="brand-wrapper">
    <div class="brand-image-wrapper">
      <div class="brand-image-content">
        <div class="brand-logo"><img src="/version1/images/amazon.svg" alt="">
        </div>
        <button class="view-store">View Store</button>
        <div class="brand-cashback">
          <p>+ 15% Cash Back</p>
        </div>
      </div>
    </div>
    <div class="brand-header-wrapper">
      <div class="brand-header-name">
        Adidas Coupon Codes & Deals
      </div>
      <div class="brand-header-flex">
        <div class="brand-header-offers">
          <span>8 Coupon</span>
          <span>12 Deals</span>
          <span>Up to 8% Cashback</span>
        </div>
        <div class="brand-header-follow">
        </div>
      </div>
      <div class="brand-header-box">
        <div class="brand-header-box-img"><img src="/version1/images/iphone.svg" alt=""></div>
        <div class="brand-header-box-content">
          <div class="brand-header-box-label">Apple IPhone 12</div>
          <div class="brand-header-price">
            <div class="old-price">$900.00</div>
            <div class="new-price">$800.04</div>
          </div>
          <div class="brand-header-description">Apple iPhone 11 Pro, 64GB, Space Gray - Fully Unlocked...</div>
          <button class="brand-header-box-button">
               Track this product price
             </button>
        </div>
      </div>
    </div>
    <div class="main-wrapper">
      <div class="additional-info">
        <div class="section1">
          <div class="additional-info-contents">
            <div class="addtional-info-title">Shopping Secrets</div>
            <div class="title">
              Sale alert
            </div>
            <div class="content">
              Sign up for Free Sale Alerts and be the first to know when there is a huge discount. This way you can save up to 65%.
            </div>
          </div>
          <div class="additional-info-contents">
            <div class="title">
              $100 Gift Certificate
            </div>
            <div class="content">
              Every week you have the opportunity to get this certificate and you only need to enter once - they will include you in every drawing every week.
            </div>
          </div>
          <div class="additional-info-contents">
            <div class="title">
              Sales Tax
            </div>
            <div class="content">
              They Handle all sale tax for orders that are in the US.
            </div>
          </div>
        </div>
        <div class="divider"></div>
        <div class="section2">
          `
          <div class="macys">
            <span>About Macy´s</span>
            <span>Free shipping on every order.</span>
            <span>Shop Macy´s with 7.0% Cash Back »</span>
          </div>
        </div>
        <div class="divider"></div>
        <div class="section3">
          <div class="return-policy">
            <div class="return-policy-title">
              Return Policy
            </div>
            <div class="return-policy-text">
              If you are not happy with your order, they are happy to accept a return or exchange. You can return your order for up to 60 days from the purchase date absolutely free.
            </div>
            <div class="macys-cashback">
              Plus get 7.0% Cash Back from Macy´s ! »
            </div>
          </div>
        </div>
      </div>
      <div class="main-section">
        <div class="offer-wrapper">
          <div class="offer-discount">
            <span>70%</span>
            <span>Off</span>
          </div>
          <div class="offer-description">
            <p>Free Makeup Or Skin Care Gift With Any $55. This would be a second line.</p>
            <span>+4% Cash Back</span>
          </div>
          <div class="offer-button-wrapper">
            <a href="#" class="coupon-revealed">
              <div class="coupon-revealed-background">Shine#18282</div>
            </a>
          </div>
        </div>
        <div class="offer-wrapper">
          <div class="offer-discount twenty">
            <span>20%</span>
            <span>Off</span>
          </div>
          <div class="offer-description">
            <p>Free Makeup Or Skin Care Gift With Any $55. This would be a second line.</p>
            <span>+4% Cash Back</span>
          </div>
          <div class="offer-button-wrapper">
            <a href="#" class="coupon">
              <div class="coupon-background">Reveal Coupon</div>
            </a>
          </div>
        </div>
        <div class="offer-wrapper">
          <div class="offer-discount seven">
            <span>07%</span>
            <span>Off</span>
          </div>
          <div class="offer-description">
            <p>Free Makeup Or Skin Care Gift With Any $55. This would be a second line.</p>
            <span>+4% Cash Back</span>
          </div>
          <div class="offer-button-wrapper">
            <a href="#" class="coupon">
              <div class="coupon-background">Reveal Coupon</div>
            </a>
          </div>
        </div>
        <div class="offer-wrapper">
          <div class="offer-discount fifteen">
            <span>15%</span>
            <span>Off</span>
          </div>
          <div class="offer-description">
            <p>Free Makeup Or Skin Care Gift With Any $55. This would be a second line.</p>
            <span>+4% Cash Back</span>
          </div>
          <div class="offer-button-wrapper">
            <a href="#" class="viewDeal">
              <div class="view-deal-background">View Deal</div>
            </a>
          </div>
        </div>
        <div class="addsavings-wrapper">
          <div class="addsavings-image"><img src="/version1/images/billsNcoupons.svg" alt=""></div>
          <div class="addsavings-text">
            <p class="label">Add savings</p>
            <p class="description">Instantly apply all coupons and cashback with Piggy’s app.</p>
          </div>
          <div class="addsavings-button">
            <button class="activateSavings">Activate Savings</button>
          </div>
        </div>
        <div class="headline-section">
          <div class="headline-contents">
            <div class="headline-label">
              <h3>This is a headline</h3>
            </div>
            <div class="headline-description">
              <p>Enim minim non ipsum mollit fugiat duis aliquip consectetur et occaecat. Adipisicing culpa officia deserunt laborum ex ad. Sunt ullamco eu qui duis laboris esse tempor incididunt sint id. Laboris cillum amet eiusmod labore enim elit. Amet
                fugiat exercitation enim veniam et cillum laborum. Mollit excepteur deserunt velit enim eiusmod in ex excepteur eiusmod do consequat ullamco. Magna duis Lorem aliqua pariatur adipisicing elit esse magna laborum. Exercitation reprehenderit
                sit sit in culpa nisi.
              </p>
            </div>
            <!-- <ul class="headline-list">
                   <li>Elit cillum culpa dolore ut proident?</li>
                   <li>Anim dolore ex amet dolor mollit irure sit consectetur non irure proident duis nisi excepteur?</li>
                   <li>Occaecat nostrud voluptate et consectetur?</li>
                   <li>Reprehenderit laboris labore excepteur sit ad?</li>
                   </ul> -->
          </div>
        </div>
      </div>
    </div>
  </div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...