Как сделать зеленый квадрат в этом месте?
Начало кода даже писать не буду(легко)
Этот квадрат надо сделать с помощью CSS float:right
Когда задаю float:right квадрату и задаю отступ сверху там остается пустое место, текст не обтягивает квадрат сверху
Про margin-left, right, bottom знаю.
Вот так получается не могу понять в чем ошибка. Заранее спасибо за помочь
Ответы (2 шт):
Автор решения: soledar10
→ Ссылка
Вариант с использованием shape-outside
.block {
max-width: 600px;
margin: 0 auto;
padding: 1rem;
border: 1px solid #ccc;
}
.block__square {
background-color: green;
float: right;
shape-outside: inset(65px 5px 75px 135px);
clip-path: inset(65px 5px 75px 135px);
width: 220px;
height: 220px;
margin: 1rem;
}<div class="block">
<div class="block__square"></div>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dignissimos molestias tempora, minima harum alias odio sunt vel, numquam tenetur similique consectetur? Sint, aspernatur. Sit labore dolorum sequi. Voluptate, necessitatibus asperiores. Lorem
ipsum dolor sit amet consectetur adipisicing elit. Sunt, laudantium reiciendis quo non amet quaerat nobis, veritatis commodi, recusandae fugiat temporibus! Repellendus nulla aut commodi inventore, vitae explicabo cumque distinctio. Lorem ipsum dolor
sit, amet consectetur adipisicing elit. Dignissimos molestias tempora, minima harum alias odio sunt vel, numquam tenetur similique consectetur? Sint, aspernatur. Sit labore dolorum sequi. Voluptate, necessitatibus asperiores. Lorem ipsum dolor sit
amet consectetur adipisicing elit. Sunt, laudantium reiciendis quo non amet quaerat nobis, veritatis commodi, recusandae fugiat temporibus! Repellendus nulla aut commodi inventore, vitae explicabo cumque distinctio.</p>
</div>
Автор решения: Qwertiy
→ Ссылка
body {
text-align: justify;
line-height: 1.5em;
}
body::before {
content: "";
float: right;
height: 3em;
}
div {
clear: right;
float: right;
height: 6em;
width: 6em;
border: 1px solid red;
box-sizing: border-box;
margin: .75em 0 .75em 1em;
}<div></div>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsum fugit dignissimos doloremque consectetur iste nihil in a quam minus. Minima possimus enim odit obcaecati eius? Quibusdam dolore ut quas nobis. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsum fugit dignissimos doloremque consectetur iste nihil in a quam minus. Minima possimus enim odit obcaecati eius? Quibusdam dolore ut quas nobis. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsum fugit dignissimos doloremque consectetur iste nihil in a quam minus. Minima possimus enim odit obcaecati eius? Quibusdam dolore ut quas nobis. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsum fugit dignissimos doloremque consectetur iste nihil in a quam minus. Minima possimus enim odit obcaecati eius? Quibusdam dolore ut quas nobis. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsum fugit dignissimos doloremque consectetur iste nihil in a quam minus. Minima possimus enim odit obcaecati eius? Quibusdam dolore ut quas nobis. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsum fugit dignissimos doloremque consectetur iste nihil in a quam minus. Minima possimus enim odit obcaecati eius? Quibusdam dolore ut quas nobis. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsum fugit dignissimos doloremque consectetur iste nihil in a quam minus. Minima possimus enim odit obcaecati eius? Quibusdam dolore ut quas nobis. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsum fugit dignissimos doloremque consectetur iste nihil in a quam minus. Minima possimus enim odit obcaecati eius? Quibusdam dolore ut quas nobis. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsum fugit dignissimos doloremque consectetur iste nihil in a quam minus. Minima possimus enim odit obcaecati eius? Quibusdam dolore ut quas nobis. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsum fugit dignissimos doloremque consectetur iste nihil in a quam minus. Minima possimus enim odit obcaecati eius? Quibusdam dolore ut quas nobis. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsum fugit dignissimos doloremque consectetur iste nihil in a quam minus. Minima possimus enim odit obcaecati eius? Quibusdam dolore ut quas nobis. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsum fugit dignissimos doloremque consectetur iste nihil in a quam minus. Minima possimus enim odit obcaecati eius? Quibusdam dolore ut quas nobis.