текст Float под DIV

Привет У меня этот код:текст Float под DIV

.wrapper { 
 
    width: 100%; 
 
    border: 3px solid black; 
 
    display: flex; 
 
} 
 
.myText { 
 
    width: 50%; 
 
    background-color: yellow; 
 
} 
 
.box { 
 
    width: 50%; 
 
    height: 50px; 
 
    background-color: orange; 
 
}

<div class="wrapper"> 
 
    <div class="myText"> 
 
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata 
 
    sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. 
 
    Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
 
    </div> 
 
    <div class="box"></div> 
 
</div>

Моя цель в том, что текст в желтом поле плавает под апельсиновым один (если он слишком долго как в примере что-то вроде этого:.

у меня нет идей, как это сделать, и я не нашел каких-либо решений в интернете. Есть идеи? Спасибо

источник

2016-08-22 MrBuggy

Это легко возможно, вы положили оранжевый ящик ** на ** желтый. Это проблема? –

Возможно изменение в тексте '.myText' и' .box'? –

.wrapper { 
 
    width: 100%; 
 
    border: 3px solid black; 
 
    display: flex; 
 
} 
 
.myText { 
 
    background-color: yellow; 
 
    text-align: justify; 
 
} 
 
.box { 
 
    background-color: orange; 
 
    float: right; 
 
    height: 60px; 
 
    width: 50%; 
 
}

<div class="wrapper"> 
 
    <div class="myText"> 
 
    <div class="box"></div> 
 
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata 
 
    
 
    sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. 
 
    Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
 
    </div> 
 
    
 
</div>

источник

2016-08-22 10:04:15 Jainam

Привет, он работает, и он все еще с flexbox - спасибо :) – MrBuggy

Попробуйте разместить .box сверху и float: right;.

.wrapper { 
 
    border: 3px solid black; 
 
    text-align: justify; 
 
} 
 
.myText { 
 
    background-color: yellow; 
 
} 
 
.box { 
 
    width: 50%; 
 
    height: 50px; 
 
    background-color: orange; 
 
    float: right; 
 
}

<div class="wrapper"> 
 
    <div class="box"></div> 
 
    <div class="myText"> 
 
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata 
 
    sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. 
 
    Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
 
    </div> 
 
</div>

источник

2016-08-22 10:03:48 Harish

Привет, есть ли способ с flexbox? – MrBuggy

Подождите. Я попробую. – Harish

Привет, снова есть решение с flexbox, и я отметил его как правильно. Вы можете посмотреть на это. Еще раз спасибо :) – MrBuggy

Простейшее решение, я могу думать о том, вы положили оранжевую коробочку желтого цвета и, прежде чем писать любой текст. Что-то вроде этого

<div class="myText"> 
    <div class="box"></div> 
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata 
sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. 
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
    </div>

Вы также должны сделать изменения в вашем CSS. Добавьте это свойство с классом box.

float:right;

источник

2016-08-22 10:08:19 GeekAb

текст Float под DIV

ответ

Смежные вопросы