div中的水平文本图像

Question

我在<li>中有这样的信息：

<li>
  <h2>Une équipe locale </h2>
  <img src="https://picsum.photos/200" class="image-circle image-center">
  <p> Test Test Test </p>
</li>

我的代码显示了这一点

但是客户要求我这样放置它们：

我尝试了很多样式，但是没有这个结果！有人会有想法吗？

Answer 1

li {
  display: flex;
}
img {
  max-height: 250px;
  border-radius : 50%;
}

.wrapper-div {
  padding-left: 10px;
}

<ul>
  <li>
    <img src="https://picsum.photos/200" class="image-circle image-center">
    <div class="wrapper-div">
      <h2>Une équipe locale</h2>

      <p>
        Description like this
      </p>
    </div>
  </li>
</ul>

Answer 2

在不更改HTML代码的情况下，您唯一的选择是display: grid

li {
  width: 600px;
  display: grid;
  grid-template: 
    "picture  heading     " auto 
    "picture  description " 1fr
    /auto     auto;
  grid-gap: 10px;
}
li h2 {
  grid-area: heading;
  margin: 0;
}
li img {
  grid-area: picture;
  border-radius: 100px;
  -o-object-fit: cover;
     object-fit: cover;
  height: 150px;
  width: 150px;
}
li p {
  grid-area: description;
  margin: 0;
}

body {
margin: 50px;
}

<li>
  <h2>Une équipe locale</h2>
  <img src="https://picsum.photos/id/40/200/200" alt="">  
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique quidem at debitis eveniet consequatur dignissimos.</p>
</li>

Answer 3

您应该更改HTML结构并添加一些CSS规则，以使文本和图像水平对齐。 尝试类似的事情：

.image-text {
  display: flex;
  align-items: center;
  background: gray;
}

.image-text__image {
  flex: 0 0 auto;
  padding: 1em;
}

.image-text__image img {
  display: block;
  border-radius: 50%;
}

.image-text__text {
  flex: 1 1 auto;
  padding: 1em;
  color: white;
}

<li class="image-text">
  <div class="image-text__image">
    <img src="https://dummyimage.com/150x150/000/fff" class="image-circle image-center">
  </div>
  <div class="image-text__text">
    <h2>Une équipe locale</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et fermentum dui. Ut orci quam, ornare sed lorem sed, hendrerit.</p>
  </div>
</li>