html - 无法让图像和文本与导航栏下的 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 很陌生！谢谢！

标签： htmlcssdisplaytext-alignmenttext-align

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>