嵌套的 flexbox 不按我希望的方向排列。

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

Nested flexboxes are not going in the direction i want

问题

我想要选择div class="SexSupport content"内部的项目，这些项目已设置为display: flex;和flex-direction: row;，以便div class="SexSupport text"和div class="SexSupportPic"横向并排放置。

我 figma 文件中显示所需格式的照片

以下是我的 HTML：

  1. <section id="SexSupport">
  2.     <div class="SexSupport content">
  3.         <div class="SexSupport text">
  4.             <div>
  5.                 <h1 class="projectTitle">
  6.                     SexSupport
  7.                 </h1>
  8.                 <h4 class="projectType">
  9.                     app design, IxD, UX research
  10.                 </h4>
  11.             </div>
  12.             <h4 class="projectCaption">
  13.                 SexSupport 是解决美国社会中性健康教育不足的解决方案。它是一个保密的性健康平台，赋予用户查询性健康信息的权利。
  14.                 该网站尊重用户的匿名性，同时不影响互动性。
  16.             </h4>
  17.         </div>
  18.         <div class="SexSupportPic">
  19.             <img src="Page 1/images/SexSupportphone.png" alt="显示 SexSupport 应用程序屏幕的 iPhone 图片">
  20.         </div>
  21.     </div>
  22. </section>

以及我的 CSS：

  1. #SexSupport {
  2.     background-color: #223843;
  3.     margin: 0%;
  4. }
  6. .SexSupport .content {
  7.     display: flex;
  8.     flex-direction: row;
  9.     align-items: center;
  10. }
  12. .SexSupportPic {
  13.     max-height: 80vh;
  14.     width: auto;
  15. }

但是不知何故，它们拒绝并排放置，保持垂直方向：

显示了它的实际显示方式的代码预览图片

我已经多次检查过，确保没有拼写错误，甚至多次询问 ChatGPT，以查看是否只是一个简单的修复，但图片仍然不移动，仍然直接位于文本下方。

请帮忙。

谢谢。

英文:

I want the items within div class=&quot;SexSupport content&quot; that are have set to display: flex; and flex-direction: row; so that div class=&quot;SexSupport text&quot; and div class=&quot;SexSupportPic&quot; are sitting horizontally next to each other.

a photo of my figma file that shows how i want my content formatted

here is my html:

  1. &lt;section id=&quot;SexSupport&quot;&gt;
  2.         &lt;div class=&quot;SexSupport content&quot;&gt;
  3.             &lt;div class=&quot;SexSupport text&quot;&gt;
  4.                 &lt;div&gt;
  5.                     &lt;h1 class=&quot;projectTitle&quot;&gt;
  6.                         SexSupport
  7.                     &lt;/h1&gt;
  8.                     &lt;h4 class=&quot;projectType&quot;&gt;
  9.                         app design, IxD, UX research
  10.                     &lt;/h4&gt;
  11.                 &lt;/div&gt;
  12.                 &lt;h4 class=&quot;projectCaption&quot;&gt;
  13.                     SexSupport is the solution to the lack of sexual
  14.                     health education in American society. It is a 
  15.                     confidential sexual health platform that empowers 
  16.                     users to inquire about their sexual health.  
  17.                     The site honors users anonymity without undermining 
  18.                     interactivity.
  20.                 &lt;/h4&gt;
  21.             &lt;/div&gt;
  22.             &lt;div class=&quot;SexSupportPic&quot;&gt;
  23.                 &lt;img src=&quot;Page 1/images/SexSupportphone.png&quot; alt=&quot;picture of iPhones displaying screens from the SexSupport app&quot;&gt;
  24.             &lt;/div&gt; 
  25.         &lt;/div&gt;
  26.     &lt;/section&gt;

and my CSS:

  1. #SexSupport {
  2.     background-color: #223843;
  3.     margin: 0%;
  4. }
  6. .SexSupport .content {
  7.     display: flex;
  8.     flex-direction: row;
  9.     align-items: center;
  10. }
  12. .SexSupportPic {
  13.     max-height: 80vh;
  14.     width: auto;
  15. }

but for some reason, they refuse to sit next to each other and remain in a vertical orientation:

a photo of my code preview that shows how it is displayed instead

I've tried rereading it over and over to make sure there are no typos and i even asked chatGPT multiple times to try to see if it was just a simple fix but the picture refuses to budge and remains directly below the text.

pls assist.

thank you.

答案1

得分: 0

我尝试了您的代码，并且它通过移除.SexSupport和.content之间的空格工作，就像这段代码一样：

  1. .SexSupport.content {
  2.     display: flex;
  3.     flex-direction: row;
  4.     align-items: center;
  5. }
英文:

I tried your code, and it works by removing the space between .SexSupport and .content just like this code:

  1. .SexSupport.content {
  2.     display: flex;
  3.     flex-direction: row;
  4.     align-items: center;
  5. }

huangapple
  • 本文由 发表于 2023年6月16日 04:21:56
  • 转载请务必保留本文链接：https://go.coder-hub.com/76485261.html
  • css
  • figma
  • flexbox
  • format
  • html
匿名

发表评论

匿名网友

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

确定