FlexBox с изображением и текстом, заставляет текст переносить строки, а не изображение

Question

Я работаю с виджетом, поэтому длина моего текста является динамической c. Я понял, как сделать разрыв строки во флекс-боксе, но он точно не делает то, что должен. Разрыв текстовой строки теперь работает правильно, но изображение меняет свою позицию.

Это нормально, но когда я набираю больше текста и заставить разрыв строки сделать это следующим образом:

Если я введу еще больше текста, он «отскочит» назад к желаемой позиции.

.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>

Я не хочу, чтобы изображение "перепрыгивало" в левый верхний угол. Спасибо, что прочитали это.

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, и текст занимают до 50% размера области просмотра, а текст выравнивается по верху изображения. Если это не то, что вам нужно, просто go вернитесь к:

.picture{
    max-width:100%;
}

и

.Container{
    align-items: baseline;
}

Answer 2

.picture{
    max-width: 50%; /*try to modify the width, enjoy!*/
    width: 100%;
    height:auto; 
}

.Container{
    display: flex;
}

p {
  flex: 1;
}

<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>

Это мой ответ на вашу проблему. Я думаю, у тебя много бесполезного CSS. При использовании flex вам просто нужно согнуть дочерний элемент и определить максимальную ширину для управления. Ширина изгиба: 1; на тексте, вы можете изменить размер изображения, чтобы управлять размером текста. Я надеюсь, что это поможет вам!