html - 带有图像和文本的 FlexBox，强制文本换行而不是图像

Question

我正在使用一个小部件，所以我的文本长度是动态的。我想出了如何在 flex 框中换行，但它并没有完全按照它应该做的那样做。文本换行符现在正常工作，但图像改变了它的位置。

没关系，但是当我输入更多文本并强制换行时，它会这样做：

如果我输入更多文本，它会“跳”回所需的位置。

.picture{
    margin:0;
    float:right;
    max-width:100%;
    height:auto; 
}

.Container{
    display:inline-flex;
    align-items: baseline;
    justify-content: space-between;
    flex-direction: row;
    flex-wrap: wrap-reverse;
    vertical-align: top;
    word-break: break-all;
    word-wrap: break-word;
}

<div class="Container"> <p class="jobDescription">{{job}}</p> <img src="{{bildHaus}}" alt="bildHaus" class="picture"></div>

我不希望图像“跳”到左上角。感谢您阅读本文。

标签： htmlcss

Answer 1

我不确定我是否理解您要达到的目标。如果您想让文本始终位于图片的左侧，请尝试以下方式：

.picture{
    margin:0;
    float:right;
    max-width:50%;
    height:auto; 
}

.Container{
    display:inline-flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-direction: row;
    flex-wrap: no-wrap;
    vertical-align: top;
    word-break: break-all;
    word-wrap: break-word;
}

p {
  flex-wrap: wrap;
  max-width: 50%;
}

<div class="Container"> <p class="jobDescription">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <img src="https://www.voyagesphotosmanu.com/Complet/images/immagine_geranio_gr.jpg" alt="bildHaus" class="picture"></div>

我编辑了代码，因此 img 和 text 都占据了视口大小的 50%，并且文本与图像的顶部对齐。如果这不是您想要的，请返回：

.picture{
    max-width:100%;
}

和

.Container{
    align-items: baseline;
}