无法让图像和文本与导航栏下的 CSS/flexbox 对齐

Question

我一直在尝试将文本对齐到图像的右侧，但无论我做什么——当文本行变得太长时——它一直显示在图像的正下方，而不是继续到图像旁边的下一行图片。 我试图为文本添加内联显示，但它没有改变任何东西。 我还尝试将图像向左浮动，但最终将我的图像切成两半。

p {
    text-align: right;
    color: white;
    font-size: 20px;
    font-family: orpheuspro, serif;
    font-style: normal;
    align-items: center;
    line-height: 2.5;
    text-transform: capitalize;
    font-size: 30px;
    justify-content: right;
    float: right;
    padding-right: 100px;
    padding-bottom: 90px;
    overflow: auto;
}

img {
    padding-left: 90px;
    opacity: 0.55;
    height: auto;
   
}

div {
    position:relative;
    background-color: #361833;
    min-height: 40vh;
} 

HTML 文件：

<div>
<div>
  <br>
  <img src='../../assets/img/image0.jpeg' alt="wj" width="500"/>
  <p>some loooooooooooooooooooooooooooong text here shdfklshjfsldfhskdjfzf</p>
</div>
</div>

任何指导将不胜感激，因为我对 CSS 还很陌生！ 谢谢！

Answer 1

尝试使用flex property而不是float 。

还要添加到 p 标签word-break:break-word; 对齐下一行

结果桌面视图：

移动视图：

 p { text-align: right; color: white; font-size: 20px; font-family: orpheuspro, serif; font-style: normal; align-items: center; line-height: 2.5; text-transform: capitalize; font-size: 30px; justify-content: right; padding-right: 100px; padding-bottom: 90px; overflow: auto; word-break:break-word } img { padding-left: 90px; opacity: 0.55; height: auto; } .nav { position:relative; background-color: #361833; min-height: 40vh; display:flex; flex-wrap:nowrap; } @media only screen and (max-width:768px){ .nav { display:flex; flex-direction:column; } }

 <div> <div class="nav"> <img src='https://i.stack.imgur.com/amhjm.png' alt="wj" width="500"/> <p>some loooooooooooooooooooooooooooong text here shdfklshjfsldfhskdjfzf</p> </div> </div>

Answer 2

我知道这个问题已经有一段时间了，但我已经简化了这个，所以图像不会被压扁。 不知道为什么这是一个可行的解决方案。

 header { background-color: #361833; }.nav { display: flex; flex-direction: column; align-items: center; justify-content: space-evenly; max-width: 1100px; margin: 0 auto; }.nav img { height: auto; max-width: 100%; opacity: 0.5; }.nav p { color: white; text-transform: capitalize; text-align: center; } @media screen and (min-width: 768px) {.nav { flex-direction: row; } }

 <header> <div class="nav"> <img src='https://i.stack.imgur.com/amhjm.png' alt="wj"/> <p>some loooooooooooooooooooooooooooong text here shdfklshjfsldfhskdjfzf</p> </div> </header>

Answer 3

最终通过为我的文本设置宽度来解决这个问题！