将元素容器与 Flexbox 对齐

问题描述 投票：0回答：1

/* Universal selector */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: rgb(255, 255, 255);
    color: rgb(51, 51, 51);
    font-family: sans-serif;
    line-height: 1.4;
}

h1 {
    text-align: center;
}

h2,
h3 {
    text-align: left;
}

/* h2,
h3,
a,
ul,
li,
p {
    margin-left: 52px;
} */

/* Product */
.product {
    border: 5px solid black;
    width: 1350px;
    margin: 75px auto;
    position: relative;
}

.product-title {
    font-size: 30px;
    font-weight: bold;
    text-transform: uppercase;
    background-color: rgba(88, 88, 88, 0.564);
    padding: 25px;
}

.img-container {
    display: flex;
    justify-self: flex-start;
    margin-bottom: 0;
}


/* Price and Shipping */
.price {
    font-size: 22px;
    /* margin-left: 71px; */
    margin-bottom: 15px;
}

.price-adjust {
    font-size: 28px;
}

.shipping {
    font-size: 14px;
    color: rgb(188, 188, 188);
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 5px;
    /* margin-left: -10px */
}

/* SALE COMPONENT */
.sale {
    background-color: rgb(214, 24, 24);
    color: white;
    border-radius: 5px;
    font-size: 20px;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-weight: bold;
    padding: 10px 18px;
    display: inline-block;
    position: absolute;
    top: -25px;
    left: -104px;
}

.sale {
    animation: wobble 1.5s ease-in-out 2;
    transform-origin: center top;
    transition: padding .1s;
    cursor: pointer;
}


@keyframes wobble {
    0% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(3deg);
    }

    50% {
        transform: rotate(-3deg);
    }

    75% {
        transform: rotate(2deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

/* MORE INFORMATION */

.more-info {
    color: black;
    font-size: 15px;
    display: inline-block;
}

.info-margin {
    margin-bottom: 60px;
}

.more-info:link {
    color: black;
    text-decoration: none;
    display: inline-block;
}

.more-info:hover,
.more-info:active {
    color: rgb(0, 0, 0);
    text-decoration: underline;
    transition: transform 0.1s;
    transform: scale(1.2);
}


/* FEATURES */

.features-title {
    text-transform: uppercase;
    font-size: 16px;
    margin-bottom: 15px;
}

.features-list {
    font-size: 18px;
    list-style: square;
    /* margin-left: 94px; */
}

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

.features-list li:last-child {
    margin-bottom: 20px;
}

/* COLOR OPTIONS */

.color-div {
    margin-left: 52px;
    margin-bottom: 28px;
    /* display: inline-block; */
}

.colors {
    height: 30px;
    width: 30px;
    filter: blur;
    border-radius: 50px;
    margin-right: 10px;
    display: inline-block;
}

.natural-leather {
    background-color: rgb(77, 51, 26)
}

.smokey-brown {
    background-color: rgb(65, 55, 45);
}

.forest-green {
    background-color: rgb(33, 54, 18);
}

.deep-blue {
    background-color: rgb(3, 40, 67);
}

.sand {
    background-color: rgb(164, 158, 141);
}

.ashe {
    background-color: rgb(79, 79, 79);
}

.colors:hover {
    transform: scale(2);
    box-shadow: 0 0 0 2px rgba(165, 165, 165, 0.464);
    transition: transform 0.2s;
    transform: scale(1.8);
    cursor: pointer;
}


/*  BUTTON  */

.add-cart {
    font-size: 20px;
    border: 0px solid;
    color: rgb(253, 253, 253);
    background-color: rgb(0, 0, 0);
    width: 100%;
    padding: 20px;
    cursor: pointer;
    letter-spacing: 1px;
}

.add-cart:hover {
    border-top: 4px solid black;
    color: rgb(0, 0, 0);
    font-size: 21px;
    font-weight: bold;
    background-color: rgb(255, 255, 255);
    transition: transform 0.2s;
}

.add-cart:active {
    color: rgb(0, 0, 0);
    font-size: 21px;
    font-weight: bold;
    background-color: rgb(255, 255, 255);
}


/* FLOATS */

/* .img-container {
    float: left;
} */

/* .price-container {
    width: 615px;
    padding-right: 50px;
    float: right;
} */

/* .features-container {
    width: 615px;
    padding-right: 50px;
    float: right;
} */

/* alignment fix */
/* .shipping {
    float: right;
    margin-left: -10px;
    padding-right: 140px;
} */

/* .more-info {
    float: left;
} */




/* FLEXBOX */

.item-details-wrapper,
.features-container {
    display: block;
    width: auto;
    width: 350px;
    /* flex: 1; */
}

.details-wrapper {
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Men's Captain Cognac Boots</title>
    <link rel="stylesheet" href="/assets/css/style.css" />
  </head>
  <body>
    <article class="product">
      <!-- Product Title -->
      <header>
        <h1 class="product-title">Men's Special Edition Cognac Boots</h1>
      </header>
      <!-- original image dimensions are 672x672 -->
      <!-- SALE TAG TOP -->
      <p class="sale">Sale</p>

      <img
        src="/assets/img/01-menCaptainSpecialEditionCognac.png"
        alt="Shot of Brown leather boots"
        class="img-container"
        width="472"
        height="472" />
      <div class="details-wrapper">
        <div class="item-details-wrapper">
          <div class="price-container">
            <div class="product-flex">
              <p class="price">
                <strong class="price-adjust">$199</strong> or 4 interest free
                payments with Klarna&#9822;
              </p>

              <p class="shipping">Free Shipping & Returns</p>
            </div>

            <div class="info-margin">
              <a
                class="more-info"
                href="https://thursdayboots.com/products/mens-captain-lace-up-boot-cognac?utm_source=bing&utm_medium=cse&utm_term=32582249644122&msclkid=94237b7509301dea36be1ee615806382&utm_campaign=CPCS%20-%20Branded%20-%20Desktop%20-%20Men%27s%20Captain&utm_content=Tobacco">
                More Information &rarr;
              </a>
            </div>
          </div>

          <div class="color-div el--color">
            <div class="colors natural-leather"></div>
            <div class="colors smokey-brown"></div>
            <div class="colors forest-green"></div>
            <div class="colors deep-blue"></div>
            <div class="colors sand"></div>
            <div class="colors ashe"></div>
          </div>
        </div>
        <!-- FLEXBOX FEATURES -->
        <!-- Product Features -->

        <div class="features-container">
          <h2 class="features-title">Product Features</h2>

          <ul class="features-list">
            <li>Limited Edition Two-Toned Hand Finished Leather</li>
            <li>Dark Anejo (Body) And Cacao (Counter, Cap Toe) Leather</li>
            <li>
              Two-Toned effect is minimal in low light, <br />
              with an eye-catching look in bright light
            </li>
            <li>Goodyear Welt Construction for longevity</li>
            <li>Premium flat waxed cotton laces</li>
            <li>Poron® Antimicrobial Shock Absorbing Insoles</li>
            <li>Cork-Bed Midsoles that Form to Your Feet</li>
            <li>Hardwearing Steel Shanks Durable Studded Rubber</li>
            <li>Outsoles Handcrafted With Integrity</li>
          </ul>
        </div>
      </div>

      <button class="add-cart">ADD TO CART</button>
    </article>
  </body>
</html>

我试图将容器对齐到图像右侧，这些容器中有多个元素（文本和颜色样本）。我遇到的问题是元素位于主空间左上角的图像下方。该项目将创建一个包含产品图像、价格详细信息、运输和产品信息的选项卡。我正在使用 Flexbox 来对齐行中的元素。我没有使用网格。

附件是我希望显示内容的突出显示区域的图像。

.item-details-wrapper,
.features-container {
   display: block;
   width: auto;
   width: 350px;
/* flex: 1; */
}

.details-wrapper {
   display: flex;
   justify-content: flex-end;
   align-items: flex-start;

}

这就是我到目前为止所拥有的，我尝试更改各种弹性设置，但没有任何效果。 我有固定宽度，因为我认为内容占用了很大的宽度并且不会动态向上移动，但即使使用 width: auto;不工作。

css flexbox
1个回答
0
投票

在看不到 HTML 代码的结构的情况下，您需要确保 Flexbox 容器正确包裹您想要布局的所有元素（图像和两个容器），并且这些元素是 Flexbox 容器的直接子元素。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.