Как заставить содержимое левого div обтекать правый?

Question

[zeni1agent]

Мне необходимо заставить содержимое левого div обтекать правый при уменьшение экрана.

<style>
.class1{
background-color:#678e6f;
width: 80%;
 float: left; 
}
.class2{
background-color:#00ff34;
width: 300px;
float: right;
}
</style>

<div class="class">
<div class="class1">
<img/><img/><img/>
</div>
<div class="class2">
<li>text</li>
</div>
</div>

но при столкновений дивов правый переносится полностью

Можно ли это как то исправить?

Мне необходимо что-то похожее на это только для переноса всех элементов
htmlbook.ru/example

Comments

[shmatuan]

1. ссылка битая
2. float: left; это костыль (т.к. всё блоки и текст только в li ) - нужно использовать flex/grid
3. @media

p.s. 4. WTF? (без ul среди обычных блоков?!) <li>text</li>

Answer 1

[Никита Ермиличев]

.class2 {
    background-color: #00ff34;
    width: 20%;
    float: right;
}

Comments

[zeni1agent]

Я уже пробовал так и мне это не подходит поскольку деформируется содержимое class2. Мне необходимо что бы class1 уменьшался а class2 оставался одинакового одного и того же размера

[Никита Ермиличев]

zeni1agent,

<style>
.class1{
background-color:#678e6f;
  width:80%;
  text-align:center;
  float:left;
}
.class2{
background-color:#00ff34;
width: 300px;
float: right;
}



.class {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: stretch;
}
</style>

<div class="class">
	<div class="class1">
		<img/><img/><img/>
	</div>
	
	<div class="class2">
		<li>text</li>
	</div>
</div>