Выравнивание / обтекание изображения и текста

Question

Я пытаюсь поместить изображение слева и текст для начала справа, точно такой же высоты, как и изображение. Вот мой код стиля:

img.two {
    height: 10%;
    width: 10%;
 }

<img class="two" src="https://www.webkit.org/blog-files/acid3-100.png" >Sample text

Однако «SampleText» попадает внизу изображения, а не сверху.

Answer 1

Другой простой способ сделать это - использовать свойство float в CSS. По сути, это перенос текста. Вы не можете сделать это, просто поместив текст рядом с тегом img, потому что само изображение будет иметь высоту и по умолчанию будет восприниматься как блок для отображения. Следовательно, вам придется использовать тег p и обернуть текст вокруг изображения.

img.two {
  height: 50%;
  width: 50%;
  float:left; /* this is the property you want to set*/
}
p{
  color:red;
}

<p class="text-wrap"><img class="two" src="https://www.webkit.org/blog-files/acid3-100.png" > Sample text Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in dictum quam. Etiam mauris nisl, eleifend sed porttitor eget, ultricies porta mi. Cras nec vehicula sapien. Sed lacinia tempus dignissim. Maecenas consequat nulla eu elit fermentum, sed pulvinar lacus eleifend. Vivamus at dictum dolor. Cras eget iaculis diam, ac tempor diam. Duis tincidunt aliquet nisi et tempor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec semper nulla et lacus malesuada consequat eu id eros.

Quisque sit amet rutrum neque, facilisis volutpat ligula. Aenean cursus urna non molestie maximus. Sed ligula orci, condimentum eget molestie ac, vehicula consectetur dui. Sed velit augue, pellentesque ultrices ipsum et, cursus rhoncus justo. Nunc maximus tortor nec dolor viverra, nec gravida orci varius. Donec imperdiet magna ac libero tempor vulputate. Proin ut magna aliquet, volutpat magna a, mattis sapien.

Praesent eleifend fermentum imperdiet. Donec non sem ligula. Phasellus at luctus neque. Cras nec eros non odio imperdiet bibendum vestibulum a tellus. Vivamus sit amet porttitor felis. Nullam dignissim, eros ac pretium volutpat, lacus dui facilisis eros, vel finibus purus purus eget turpis. Etiam sodales risus a mauris viverra congue. Duis congue fringilla ligula, vel auctor nunc porta eu. Fusce bibendum, dolor at semper interdum, sem justo dapibus ipsum, vel euismod ligula eros et turpis.</p>

Answer 2

Вы можете использовать макет сетки для этого:

.container {
  display: inline-grid;
  grid-template-columns: 10% auto;
  grid-column-gap: 10px;
  width: 100%;
}

img.two {
  width: 100%;
}

<div class="container">
  <img class="two" src="https://images.unsplash.com/photo-1584125970258-ea3da734d03a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2550&q=80" />
  <p>Sample text </p>
</div>

Answer 3

Вы можете использовать flexbox и попробовать так:

HTML:

<div class="cover">
 <div class="img">
  <img class="two" src="./img/project-structure.png" > 
 </div>
 <div class="text">
   <p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum ab voluptatibus deserunt, officiis corrupti sapiente asperiores in officia cupiditate temporibus fuga eligendi delectus provident reprehenderit aut at beatae repellat ullam.</span>
 <span>Fugit ipsam praesentium, aperiam amet maiores repellendus provident quos, dolorem repellat perspiciatis vitae! Possimus expedita distinctio, asperiores incidunt magnam, voluptatem aspernatur eum dolorem at totam quasi, quos, odit aperiam fugiat.</span>
 <span>Doloremque id voluptatibus maxime ipsum veritatis accusamus beatae ipsam velit numquam corporis dolorum est, cupiditate voluptates natus, rerum similique, voluptatum eum quisquam necessitatibus consectetur voluptas ducimus rem repellat quod ad?</span>
 <span>Fugit natus amet, id eum. Voluptates tenetur doloremque, dolorum modi reprehenderit beatae labore eligendi accusantium odio nulla fugit vitae, enim assumenda. Quod aut perferendis numquam quisquam, laborum sequi reprehenderit dolorum?</span>
 <span>Consequuntur numquam impedit, reprehenderit consequatur asperiores magnam voluptas doloribus architecto. Temporibus ratione officia sapiente fugit, vitae adipisci alias harum aspernatur earum, quod velit explicabo a, quia magni sunt voluptatum nostrum.</span>
 <span>Aspernatur veritatis tenetur, impedit, beatae mollitia harum cumque laborum quas quibusdam voluptas unde nulla ad eligendi quod optio quia, ipsa. Quas dignissimos saepe neque aliquid quaerat quibusdam placeat illum enim.</span>
 <span>Iure corporis ipsum aut numquam quaerat sequi praesentium repellat, culpa tempore quis, modi laborum minus dolorem commodi animi atque minima dolorum nobis repudiandae. Ea dolorem quidem, nam harum, debitis ex!</span>
 <span>Quae suscipit dolor ex eius tempora nobis error, incidunt, harum minima explicabo quis id, dolorum alias commodi vitae non minus adipisci officia nihil delectus accusantium libero! Sapiente at, adipisci aut?</span>
 <span>Error repellat ipsa ad, earum cupiditate corporis est a reprehenderit, cum modi deserunt, sit dolores repudiandae. Vel saepe voluptatibus labore, sapiente unde dolorem, obcaecati libero quae ea reiciendis? Libero, provident.</span>
 <span>Alias recusandae distinctio eos magnam. Quas natus dignissimos odit qui id consectetur doloribus animi ab explicabo iure, dolor deserunt, odio eaque illo velit! Beatae, soluta totam deleniti. Dignissimos, reprehenderit earum?</span></p>
 </div>

CSS:

.cover{
      display: -webkit-flex;
      display: -moz-flex;
      display: -ms-flex;
      display: -o-flex;
      display: flex;
      flex-wrap: wrap;
    }

    .img{
      flex-basis: 10%;
    }

    .text{
      flex-basis: 90%; 
    }