当前位置： 文江博客话题详情

调试Flexbox-我缺少什么？

发布于 2025-02-13 17:42:56 字数 5213 浏览 0 评论 0原文

我一直在研究这个项目，并且完全坚持确保在桌面上显示同一卡（图像和项目内容）在同一行上。几天后，我承认我需要帮助。

谁能告诉我我出了什么问题，以及如何正确地使用flexbox解决此问题，因为我要努力弄清楚它。

下面是桌面中应该看起来像的照片。

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

body {
    align-items: center;
    background-color: hsl(30, 38%, 92%);
    color: hsl(228, 12%, 48%);
    display: flex;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.875em;
    justify-content: center;
    height: 100vh;
}

h1 {
    color: black;
    font-family: 'Fraunces', serif;
    font-size: 1.875em;
}

h3 {
    font-size: 0.75em;
    font-weight: 500;
    letter-spacing: 7px;
    text-transform: uppercase;
}

p {
    font-size: 0.75em;
    line-height: 1.7;
}

/* ------   ENTIRE CONTAINER --------- */


#card-container {
    align-items: center;
    justify-content: center;
    /* flex-wrap: wrap; */
    flex-direction: row;
    width: 700px;
    margin: 0 auto;
}

#card-container row {
    display: flex;
    flex-direction: row;
    margin: 0;
}

@media screen and (max-width : 667px) {
    
    #container {
        border-radius: 10px 0 10px 0;
        height: 39.7em;
        width: 22.8em;

    }
}

/* ------   LEFT CONTAINER w/ IMAGE --------- */

.image {
    background-image: url(images/image-product-desktop.jpg);
    background-repeat: no-repeat;
    background-size: contain;
    border-radius: 10px 0 0 10px;
    height: 394px;
    max-width: 50%;
margin-right: 0;
display: flex;
flex-direction: row;

}

@media screen and (max-width : 667px) {
    
    .image {
        background-image: url(images/image-product-mobile.jpg);
        border-radius: 10px 10px 0 0;
        height: 230px;
        width: 50%;
        margin: 0 auto;
}
}

/* ------RIGHT CONTAINER w/ CONTENT --------- */


.right-container {
    background-color: white;
    border-radius: 0 10px 10px 0;
    height: 450px;
    padding: 2em;
    width: 50%;
}

@media screen and (max-width : 667px) {
    
    .right-container {
        border-bottom-left-radius: 10px;
        border-top-right-radius: 0px;
        padding: 30px 30px 5px;
        width: 50%;
        margin: 0 auto;
    }
}

.right-container h1 {
    margin: auto auto 7% auto;
}

.right-container h3 {
    padding-bottom: 1em;
    padding-top: 1.9em;
}

.right-container p {
    padding-right: 2em;
    padding-top: 1.1em;
}



/* ------ PRICES --------- */

.price-container h1 {
    color: hsl(158, 36%, 37%);
    display: inline-block;
    margin-top: 20%;
}

.price-container p {
    display: inline-block;
    margin-left: 5em;
    text-decoration: line-through;
}

/* ------- ADD TO CART --------- */

.cart-btn {
    background-color: hsl(158, 36%, 37%);
    background-position: 4em;
    background-repeat: no-repeat;
    border-radius: 10px;
    border: transparent;
    color: white;
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    padding: 4% 32%;
}

.cart-btn:hover {
    background-color: black;
    cursor: pointer;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->

  <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
  
  <title>Product preview card component</title>

  <!-- CSS STYLESHEET-->
<link rel="stylesheet" href="styles.css">

<!-- GOOGLE FONTS -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
  href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,[email protected],700&family=Montserrat:wght@500;700&display=swap"
  rel="stylesheet">



</head>
<body>

  <section class="card-container">
  
    <div class="row">
    <div class="image">
  
      <div class="img-desktop"></div>
      <div class="img-mobile"></div>
  
    </div>
  </div>
  
  <div class="row">
  <div class="right-container">
  
      <h3>Perfume</h3>
      <h1>Gabrielle Essence Eau De Parfum</h1>
      <p>A floral, solar and voluptuous interpretation composed by Olivier Polge,
        Perfumer-Creator for the House of CHANEL.</p>
  
      <div class="price-container">
        
        <h1>$149.99</h1>
        <p>$169.99</p>
      </div>
  
      <div class="cart-container">
        
        <img src="./images/icon-cart.svg" alt="card-img">
        <button class="cart-btn">Add to Cart</button>
      </div>
  
    </div>
  </div>  
  
  </section>



</body>
</html>

原文

I've been working on this project and I am fully stuck on ensuringing both cards (the image and the project content) are on the same row when displayed on desktop. After a few days, I admit I need help.

Can anyone tell me where I've gone wrong and how I can solve this using flexbox correctly because I am going crosseyed trying to figure it out.

Below is a photo of what it's supposed to look like in desktop.

enter image description here

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

body {
    align-items: center;
    background-color: hsl(30, 38%, 92%);
    color: hsl(228, 12%, 48%);
    display: flex;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.875em;
    justify-content: center;
    height: 100vh;
}

h1 {
    color: black;
    font-family: 'Fraunces', serif;
    font-size: 1.875em;
}

h3 {
    font-size: 0.75em;
    font-weight: 500;
    letter-spacing: 7px;
    text-transform: uppercase;
}

p {
    font-size: 0.75em;
    line-height: 1.7;
}

/* ------   ENTIRE CONTAINER --------- */


#card-container {
    align-items: center;
    justify-content: center;
    /* flex-wrap: wrap; */
    flex-direction: row;
    width: 700px;
    margin: 0 auto;
}

#card-container row {
    display: flex;
    flex-direction: row;
    margin: 0;
}

@media screen and (max-width : 667px) {
    
    #container {
        border-radius: 10px 0 10px 0;
        height: 39.7em;
        width: 22.8em;

    }
}

/* ------   LEFT CONTAINER w/ IMAGE --------- */

.image {
    background-image: url(images/image-product-desktop.jpg);
    background-repeat: no-repeat;
    background-size: contain;
    border-radius: 10px 0 0 10px;
    height: 394px;
    max-width: 50%;
margin-right: 0;
display: flex;
flex-direction: row;

}

@media screen and (max-width : 667px) {
    
    .image {
        background-image: url(images/image-product-mobile.jpg);
        border-radius: 10px 10px 0 0;
        height: 230px;
        width: 50%;
        margin: 0 auto;
}
}

/* ------RIGHT CONTAINER w/ CONTENT --------- */


.right-container {
    background-color: white;
    border-radius: 0 10px 10px 0;
    height: 450px;
    padding: 2em;
    width: 50%;
}

@media screen and (max-width : 667px) {
    
    .right-container {
        border-bottom-left-radius: 10px;
        border-top-right-radius: 0px;
        padding: 30px 30px 5px;
        width: 50%;
        margin: 0 auto;
    }
}

.right-container h1 {
    margin: auto auto 7% auto;
}

.right-container h3 {
    padding-bottom: 1em;
    padding-top: 1.9em;
}

.right-container p {
    padding-right: 2em;
    padding-top: 1.1em;
}



/* ------ PRICES --------- */

.price-container h1 {
    color: hsl(158, 36%, 37%);
    display: inline-block;
    margin-top: 20%;
}

.price-container p {
    display: inline-block;
    margin-left: 5em;
    text-decoration: line-through;
}

/* ------- ADD TO CART --------- */

.cart-btn {
    background-color: hsl(158, 36%, 37%);
    background-position: 4em;
    background-repeat: no-repeat;
    border-radius: 10px;
    border: transparent;
    color: white;
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    padding: 4% 32%;
}

.cart-btn:hover {
    background-color: black;
    cursor: pointer;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->

  <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
  
  <title>Product preview card component</title>

  <!-- CSS STYLESHEET-->
<link rel="stylesheet" href="styles.css">

<!-- GOOGLE FONTS -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
  href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,[email protected],700&family=Montserrat:wght@500;700&display=swap"
  rel="stylesheet">



</head>
<body>

  <section class="card-container">
  
    <div class="row">
    <div class="image">
  
      <div class="img-desktop"></div>
      <div class="img-mobile"></div>
  
    </div>
  </div>
  
  <div class="row">
  <div class="right-container">
  
      <h3>Perfume</h3>
      <h1>Gabrielle Essence Eau De Parfum</h1>
      <p>A floral, solar and voluptuous interpretation composed by Olivier Polge,
        Perfumer-Creator for the House of CHANEL.</p>
  
      <div class="price-container">
        
        <h1>$149.99</h1>
        <p>$169.99</p>
      </div>
  
      <div class="cart-container">
        
        <img src="./images/icon-cart.svg" alt="card-img">
        <button class="cart-btn">Add to Cart</button>
      </div>
  
    </div>
  </div>  
  
  </section>



</body>
</html>

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（3）

茶底世界 2025-02-20 17:42:56

为了解决这个问题，我只需将元素带有background-image在新的div称为.left-container中。我删除了两个.row的使用，然后将它们放入一个row中，然后将其设置为display：flex;。然后，我使用 font Awesome 用于您的购物车图标。

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

body {
  align-items: center;
  background-color: hsl(30, 38%, 92%);
  color: hsl(228, 12%, 48%);
  display: flex;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.875em;
  justify-content: center;
  height: 100vh;
}

h1 {
  color: black;
  font-family: 'Fraunces', serif;
  font-size: 1.875em;
}

h3 {
  font-size: 0.75em;
  font-weight: 500;
  letter-spacing: 7px;
  text-transform: uppercase;
}

p {
  font-size: 0.75em;
  line-height: 1.7;
}

.row {
  display: flex;
}


/* ------   ENTIRE CONTAINER --------- */

#card-container {
  align-items: center;
  justify-content: center;
  /* flex-wrap: wrap; */
  flex-direction: row;
  width: 700px;
  margin: 0 auto;
}

#card-container row {
  display: flex;
  flex-direction: row;
  margin: 0;
}


/* ------   LEFT CONTAINER w/ IMAGE --------- */

.left-container {
  width: 50%;
  height: 450px;
}

.image {
  background-image: url(https://i.picsum.photos/id/487/200/300.jpg?grayscale&hmac=j_GpFy8cDZyFmRD6sSG09M39jrZwpW3dCYWYnWlC1Vo);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 100%;
  width: 100%;
  border-radius: 10px 0 0 10px;
  margin-right: 0;
  display: flex;
  flex-direction: row;
}


/* ------RIGHT CONTAINER w/ CONTENT --------- */

.right-container {
  background-color: white;
  border-radius: 0 10px 10px 0;
  height: 450px;
  padding: 2em;
  width: 50%;
  display: flex;
  flex-flow: column;
  justify-content: space-around;
}

.right-container h3 {
  padding-bottom: 1em;
  padding-top: 1.9em;
}

.right-container p {
  padding-right: 2em;
  padding-top: 1.1em;
}


/* ------ PRICES --------- */

.price-container h1 {
  color: hsl(158, 36%, 37%);
  display: inline-block;
  margin-top: 20%;
}

.price-container p {
  display: inline-block;
  margin-left: 5em;
  text-decoration: line-through;
}


/* ------- ADD TO CART --------- */

.cart-btn {
  background-color: hsl(158, 36%, 37%);
  background-position: 4em;
  background-repeat: no-repeat;
  border-radius: 10px;
  border: transparent;
  color: white;
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  width: 100%;
  padding: 1em;
}

.cart-btn:hover {
  background-color: black;
  cursor: pointer;
}

i {
  color: white;
}

.card-container {
  display: flex;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- displays site properly based on user's device -->
  <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
  <title>Product preview card component</title>
  <!-- CSS STYLESHEET-->
  <link rel="stylesheet" href="styles.css">
  <!-- GOOGLE FONTS -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <script src="https://kit.fontawesome.com/6140596fcb.js" crossorigin="anonymous"></script>
  <link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,[email protected],700&family=Montserrat:wght@500;700&display=swap" rel="stylesheet">
</head>

<body>
  <section class="card-container">
    <div class="row">
      <div class="left-container">
        <div class="image">
          <div class="img-desktop"></div>
          <div class="img-mobile"></div>
        </div>
      </div>
      <div class="right-container">
        <h3>Perfume</h3>
        <h1>Gabrielle Essence Eau De Parfum</h1>
        <p>A floral, solar and voluptuous interpretation composed by Olivier Polge, Perfumer-Creator for the House of CHANEL.</p>
        <div class="price-container">
          <h1>$149.99</h1>
          <p>$169.99</p>
        </div>
        <div class="cart-container">
          <button class="cart-btn"><i class="fa-solid fa-cart-shopping"></i>
           Add to Cart</button>
        </div>
      </div>
    </div>
  </section>
</body>

</html>

To solve this I simply put the element with the background-image in a new div called .left-container. I removed the use of two .row's and put them in one row and set it to display: flex;. I then used Font Awesome for your shopping cart icon.

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

body {
  align-items: center;
  background-color: hsl(30, 38%, 92%);
  color: hsl(228, 12%, 48%);
  display: flex;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.875em;
  justify-content: center;
  height: 100vh;
}

h1 {
  color: black;
  font-family: 'Fraunces', serif;
  font-size: 1.875em;
}

h3 {
  font-size: 0.75em;
  font-weight: 500;
  letter-spacing: 7px;
  text-transform: uppercase;
}

p {
  font-size: 0.75em;
  line-height: 1.7;
}

.row {
  display: flex;
}


/* ------   ENTIRE CONTAINER --------- */

#card-container {
  align-items: center;
  justify-content: center;
  /* flex-wrap: wrap; */
  flex-direction: row;
  width: 700px;
  margin: 0 auto;
}

#card-container row {
  display: flex;
  flex-direction: row;
  margin: 0;
}


/* ------   LEFT CONTAINER w/ IMAGE --------- */

.left-container {
  width: 50%;
  height: 450px;
}

.image {
  background-image: url(https://i.picsum.photos/id/487/200/300.jpg?grayscale&hmac=j_GpFy8cDZyFmRD6sSG09M39jrZwpW3dCYWYnWlC1Vo);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 100%;
  width: 100%;
  border-radius: 10px 0 0 10px;
  margin-right: 0;
  display: flex;
  flex-direction: row;
}


/* ------RIGHT CONTAINER w/ CONTENT --------- */

.right-container {
  background-color: white;
  border-radius: 0 10px 10px 0;
  height: 450px;
  padding: 2em;
  width: 50%;
  display: flex;
  flex-flow: column;
  justify-content: space-around;
}

.right-container h3 {
  padding-bottom: 1em;
  padding-top: 1.9em;
}

.right-container p {
  padding-right: 2em;
  padding-top: 1.1em;
}


/* ------ PRICES --------- */

.price-container h1 {
  color: hsl(158, 36%, 37%);
  display: inline-block;
  margin-top: 20%;
}

.price-container p {
  display: inline-block;
  margin-left: 5em;
  text-decoration: line-through;
}


/* ------- ADD TO CART --------- */

.cart-btn {
  background-color: hsl(158, 36%, 37%);
  background-position: 4em;
  background-repeat: no-repeat;
  border-radius: 10px;
  border: transparent;
  color: white;
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  width: 100%;
  padding: 1em;
}

.cart-btn:hover {
  background-color: black;
  cursor: pointer;
}

i {
  color: white;
}

.card-container {
  display: flex;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- displays site properly based on user's device -->
  <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
  <title>Product preview card component</title>
  <!-- CSS STYLESHEET-->
  <link rel="stylesheet" href="styles.css">
  <!-- GOOGLE FONTS -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <script src="https://kit.fontawesome.com/6140596fcb.js" crossorigin="anonymous"></script>
  <link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,[email protected],700&family=Montserrat:wght@500;700&display=swap" rel="stylesheet">
</head>

<body>
  <section class="card-container">
    <div class="row">
      <div class="left-container">
        <div class="image">
          <div class="img-desktop"></div>
          <div class="img-mobile"></div>
        </div>
      </div>
      <div class="right-container">
        <h3>Perfume</h3>
        <h1>Gabrielle Essence Eau De Parfum</h1>
        <p>A floral, solar and voluptuous interpretation composed by Olivier Polge, Perfumer-Creator for the House of CHANEL.</p>
        <div class="price-container">
          <h1>$149.99</h1>
          <p>$169.99</p>
        </div>
        <div class="cart-container">
          <button class="cart-btn"><i class="fa-solid fa-cart-shopping"></i>
           Add to Cart</button>
        </div>
      </div>
    </div>
  </section>
</body>

</html>

回复 原文
流绪微梦 2025-02-20 17:42:56

我制作了我的自我页面来复制您想要的解决方案，我做了最少的样式，以使您了解CSS Works中的Flexbox属性（请注意：我没有响应能力，所以请尝试查看桌面视图） 。如果您面临任何疑问，请参阅我的解决方案，并提出问题。

* {
  margin: 0;
  padding: 0;
}

.card-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  background-color: hsl(30, 38%, 92%);
  color: hsl(228, 12%, 48%);
  font-family: "Montserrat", sans-serif;
  font-size: 0.875em;
}

#random-image {
  height: 100%;
  width: 100%;
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}

.intermediate-container {
  display: flex;
  width: 60%;
  height: 50%;
  border-radius: 8px;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.55);
}

.left-container {
  width: 50%;
}

.right-container {
  width: 50%;
  padding: 10px;
  background-color: white;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="styles.css" />
    <title>Your title</title>
  </head>
  <body>
    <section class="card-container">
      <div class="intermediate-container">
        <div class="left-container">
          <img
            id="random-image"
            src="https://hatrabbits.com/wp-content/uploads/2017/01/random.jpg"
          />
        </div>
        <div class="right-container">
          <div>
            <h3>Perfume</h3>
            <h1>Gabrielle Essence Eau De Parfum</h1>
            <p>
              A floral, solar and voluptuous interpretation composed by Olivier
              Polge, Perfumer-Creator for the House of CHANEL.
            </p>
            <div class="price-container">
              <h1>$149.99</h1>
            </div>
            <div class="cart-container">
              <button class="cart-btn">
                <i class="fa-solid fa-cart-shopping"></i> Add to Cart
              </button>
            </div>
          </div>
        </div>
      </div>
    </section>
  </body>
</html>

I have made my self page that replicates the solution you want, I have done minimal styling to make you understand how flexbox properties in CSS work (NOTE: I have not made it responsive so try to have a look on desktop view). Refer to my solution and ask question(s) if you are facing any doubts.

* {
  margin: 0;
  padding: 0;
}

.card-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  background-color: hsl(30, 38%, 92%);
  color: hsl(228, 12%, 48%);
  font-family: "Montserrat", sans-serif;
  font-size: 0.875em;
}

#random-image {
  height: 100%;
  width: 100%;
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}

.intermediate-container {
  display: flex;
  width: 60%;
  height: 50%;
  border-radius: 8px;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.55);
}

.left-container {
  width: 50%;
}

.right-container {
  width: 50%;
  padding: 10px;
  background-color: white;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="styles.css" />
    <title>Your title</title>
  </head>
  <body>
    <section class="card-container">
      <div class="intermediate-container">
        <div class="left-container">
          <img
            id="random-image"
            src="https://hatrabbits.com/wp-content/uploads/2017/01/random.jpg"
          />
        </div>
        <div class="right-container">
          <div>
            <h3>Perfume</h3>
            <h1>Gabrielle Essence Eau De Parfum</h1>
            <p>
              A floral, solar and voluptuous interpretation composed by Olivier
              Polge, Perfumer-Creator for the House of CHANEL.
            </p>
            <div class="price-container">
              <h1>$149.99</h1>
            </div>
            <div class="cart-container">
              <button class="cart-btn">
                <i class="fa-solid fa-cart-shopping"></i> Add to Cart
              </button>
            </div>
          </div>
        </div>
      </div>
    </section>
  </body>
</html>

回复 原文
怎会甘心 2025-02-20 17:42:56

＃card-container row＆lt; - 使用适当的选择器（.ROW）

，从给定的信息我只能预测

#card-container row <- use proper selector (.row)

and from given information I can only predict that

回复 原文
~没有更多了~

关于作者

世俗缘

暂无简介

文章
评论
27 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

夢野间

文章 0 评论 0

百度③文鱼

文章 0 评论 0

小草泠泠

文章 0 评论 0

zhuwenyan

文章 0 评论 0

weirdo

文章 0 评论 0

坚持沉默

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文