如何基于第二个容器来对齐第一个容器？

huangapple
go评论96阅读模式
英文:

How to align the first container based on second container?

问题

我想要使路径"所有产品/巧克力"与其下方的照片对齐，但我需要保持所有元素在.product-detail-container内居中。如何实现？

您可以通过以下方式实现所需的布局：

  1. .product-detail-container {
  2.   display: flex;
  3.   flex-direction: column;
  4.   max-width: 1200px;
  5.   align-self: center;
  6.   justify-content: center;
  7.   margin: 2.5rem 5%;
  8. }
  10. .product-detail-container .path {
  11.   font-size: 1.1rem;
  12.   font-family: var(--fontCommon);
  13.   display: flex;
  14.   color: black;
  15.   align-items: center; /* 添加此行以垂直居中路径文本 */
  16. }
  18. .product-detail-container .path a:hover {
  19.   text-decoration: underline;
  20.   color: black;
  21. }
  23. .product-detail-container .photo {
  24.   width: 45%;
  25.   margin: 0; /* 添加此行以移除默认的外边距 */
  26. }
  28. .product-detail-container .photo img {
  29.   width: 100%;
  30.   border: 1px black solid;
  31. }
  33. .description {
  34.   display: flex;
  35.   margin-left: 2rem;
  36.   flex-direction: column;
  37. }

这将使路径文本与下方的照片水平对齐，并保持所有元素在.product-detail-container内居中。

英文:

Below is my code in html and CSS. Current result and my desired result with red.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

  1. .product-detail-container {
  2.   display: flex;
  3.   flex-direction: column;
  4.   /* width: 97%; */
  5.   max-width: 1200px;
  6.   align-self: center;
  7.   justify-content: center;
  8.   margin: 2.5rem 5%;
  9. }
  11. .product-detail-container .path {
  12.   font-size: 1.1rem;
  13.   font-family: var(--fontCommon);
  14.   display: flex;
  15.   color: black;
  16. }
  17. .product-detail-container .path a:hover {
  18.   text-decoration: underline;
  19.   color: black;
  20. }
  21. .product-detail-container .photo {
  22.   width: 45%;
  23. }
  25. .product-detail-container .photo img {
  26.   width: 100%;
  27.   border: 1px black solid;
  28. }
  30. .description {
  31.   display: flex;
  32.   margin-left: 2rem;
  33.   flex-direction: column;
  34. }

<!-- language: lang-html -->

  1. &lt;div class=&quot;product-detail-container&quot;&gt;
  2.   &lt;div class=&quot;path&quot;&gt;
  3.     &lt;a class=&quot;path&quot; href=&quot;/index.html&quot;&gt;All products/&lt;/a&gt;
  4.     &lt;p class=&quot;path&quot; id=&quot;path-product-title&quot;&gt;product-title&lt;/p&gt;
  5.   &lt;/div&gt;
  6.   &lt;div style=&quot;display: flex; margin-top: 30px; justify-content: center&quot;&gt;
  7.     &lt;div class=&quot;photo&quot; id=&quot;product-photo&quot;&gt;
  8.       &lt;img src=&quot;/assets/products/1.jpg&quot; class=&quot;photo&quot; /&gt;
  9.     &lt;/div&gt;
  10.     &lt;div class=&quot;description&quot;&gt;
  11.       &lt;p class=&quot;product-title&quot; id=&quot;product-title&quot;&gt;product-title&lt;/p&gt;
  12.       &lt;p class=&quot;product-id&quot; id=&quot;product-id&quot;&gt;product-id&lt;/p&gt;
  13.       &lt;p
  14.         class=&quot;product-price&quot;
  15.         id=&quot;product-price&quot;
  16.         style=&quot;margin-top: 2vh&quot;&gt;
  17.         product-price
  18.       &lt;/p&gt;
  19.     &lt;/div&gt;
  20.   &lt;/div&gt;
  21. &lt;/div&gt;

<!-- end snippet -->

I want to make the path which is "All products/chocolate" align with the photo below it but I need to keep the all element inside .product-detail-container CENTER. How to achieve?

答案1

得分: 1

移除内联样式中的 justify-content: center 可以修复 path 和 product-detail 的对齐。一旦您完成这一步，您可以继续对齐 &lt;div class=&quot;product-detail-container&quot;&gt; 到您想要的位置。请参见下面的代码片段。我还在元素中添加了边框，以便更容易查看。

  1. .product-detail-container {
  2.   display: flex;
  3.   flex-direction: column;
  4.   /* width: 97%; */
  5.   max-width: 1200px;
  6.   align-self: center;
  7.   /* justify-content: center; */
  8.   margin: 2.5rem 5%;
  9.   border: 1px solid black;
  10. }
  12. .product-detail-container .path {
  13.   font-size: 1.1rem;
  14.   font-family: var(--fontCommon);
  15.   display: flex;
  16.   color: black;
  17.   border: 1px solid green;
  18. }
  20. /* 为了修复垂直对齐 */
  21. .product-detail-container .path-item {
  22.   margin: 5px 0;
  23. }
  25. .product-detail-container .path-item a:hover {
  26.   text-decoration: underline;
  27.   color: black;
  28. }
  30. /* 将内联样式移到这个类中 */
  31. .product-detail {
  32.   display: flex;
  33.   margin-top: 30px;
  34.   border: 1px solid red;
  35.   /* justify-content: center; */
  36. }
  38. .product-detail-container .photo {
  39.   border: 1px solid cyan;
  40.   width: 45%;
  41. }
  43. .product-detail-container .photo img {
  44.   width: 100%;
  45.   border: 1px black solid;
  46. }
  48. .description {
  49.   display: flex;
  50.   margin-left: 2rem;
  51.   flex-direction: column;
  52.   flex-grow: 1; /* 添加了这个 */
  53.   border: 1px solid blue;
  54. }
  1. <div class="product-detail-container">
  2.   <div class="path">
  3.     <a class="path-item" href="/index.html">All products/</a>
  4.     <p class="path-item" id="path-product-title">product-title</p>
  5.   </div>
  6.   <div class="product-detail">
  7.     <div class="photo" id="product-photo">
  8.       <img src="/assets/products/1.jpg" class="photo" />
  9.     </div>
  10.     <div class="description">
  11.       <p class="product-title" id="product-title">product-title</p>
  12.       <p class="product-id" id="product-id">product-id</p>
  13.       <p
  14.         class="product-price"
  15.         id="product-price"
  16.         style="margin-top: 2vh"
  17.       >
  18.         product-price
  19.       </p>
  20.     </div>
  21.   </div>
  22. </div>

希望这有所帮助！

英文:

Removing justify-content: center from the inline style fixes the path and product-detail alignment. Once you have that, you can work on aligning &lt;div class=&quot;product-detail-container&quot;&gt; where you want. See the snippet bellow. I also added borders in the elements to make it easier to see.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

  1. .product-detail-container {
  2.   display: flex;
  3.   flex-direction: column;
  4.   /* width: 97%; */
  5.   max-width: 1200px;
  6.   align-self: center;
  7.   justify-content: center;
  8.   margin: 2.5rem 5%;
  9.   border: 1px solid black;
  10. }
  12. .product-detail-container .path {
  13.   font-size: 1.1rem;
  14.   font-family: var(--fontCommon);
  15.   display: flex;
  16.   color: black;
  17.   border: 1px solid green;
  18. }
  20. /* to fix vertical alignment */
  21. .product-detail-container .path-item {
  22.   margin: 5px 0;
  23. }
  25. .product-detail-container .path-item a:hover {
  26.   text-decoration: underline;
  27.   color: black;
  28. }
  30. /* moved inline style to this class */
  31. .product-detail {
  32.   display: flex;
  33.   margin-top: 30px;
  34.   border: 1px solid red;
  35.   /* justify-content: center */
  36. }
  38. .product-detail-container .photo {
  39.   border: 1px solid cyan;
  40.   width: 45%;
  41. }
  43. .product-detail-container .photo img {
  44.   width: 100%;
  45.   border: 1px black solid;
  46. }
  48. .description {
  49.   display: flex;
  50.   margin-left: 2rem;
  51.   flex-direction: column;
  52.   flex-grow: 1; /* added this */
  53.   border: 1px solid blue;
  54. }

<!-- language: lang-html -->

  1. &lt;div class=&quot;product-detail-container&quot;&gt;
  2.   &lt;div class=&quot;path&quot;&gt;
  3.     &lt;a class=&quot;path-item&quot; href=&quot;/index.html&quot;&gt;All products/&lt;/a&gt;
  4.     &lt;p class=&quot;path-item&quot; id=&quot;path-product-title&quot;&gt;product-title&lt;/p&gt;
  5.   &lt;/div&gt;
  6.   &lt;div class=&quot;product-detail&quot;&gt;
  7.     &lt;div class=&quot;photo&quot; id=&quot;product-photo&quot;&gt;
  8.       &lt;img src=&quot;/assets/products/1.jpg&quot; class=&quot;photo&quot; /&gt;
  9.     &lt;/div&gt;
  10.     &lt;div class=&quot;description&quot;&gt;
  11.       &lt;p class=&quot;product-title&quot; id=&quot;product-title&quot;&gt;product-title&lt;/p&gt;
  12.       &lt;p class=&quot;product-id&quot; id=&quot;product-id&quot;&gt;product-id&lt;/p&gt;
  13.       &lt;p
  14.         class=&quot;product-price&quot;
  15.         id=&quot;product-price&quot;
  16.         style=&quot;margin-top: 2vh&quot;&gt;
  17.         product-price
  18.       &lt;/p&gt;
  19.     &lt;/div&gt;
  20.   &lt;/div&gt;
  21. &lt;/div&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年2月24日 17:26:38
  • 转载请务必保留本文链接：https://go.coder-hub.com/75554778.html
  • alignment
  • css
  • html
  • styles
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定