无法获取图像和文本以使其与导航栏下的CSS / flexbox对齐

问题描述

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

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的新手！谢谢！

解决方法

请尝试使用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>

,

最终通过设置文本宽度来解决此问题！