将元素放在包装的div中（自定义位置）

Question

我目前需要制作类似于此的div：

我试图在我的照片上留下一个浮动，但是我右边的所有内容都浮在右边，我无法按照我的意愿居中或放置它。如您所见，元素需要放在左侧或右侧。 这就是我已经做过的事情：

<div class="container">
<div id="image">
        <img width="50%" height="50%" src="https://lh3.googleusercontent.com/yJWb9F4zy-2hXiqojIvtlUeSsBrfnjF6FThB3ZZ6aR--YJjo1ftT4wB2u0f4Ob6yyw=w300">
</div>

    <div>
        <h2>Nom de l'activité</h2>
  <p id="right">4 participants | 1 place disponible </p>
  <p>Descriptif de l'activité</p>
  <p id="right"><strong>Prix</strong></p>
  <input type="text" placeholder="Votre commentaire">


    </div>
</div>

CSS：

#image{
  float: left;
}
#right{
  text-align: right;
}

codepen

提前感谢您的帮助： - ）

Answer 1

我会使用display:flex - css3不再需要用于定位的浮动div。

你也有一个问题，你将图像设置为50％ - 因为你没有设置图像div的宽度，它导致图像div占据图像的整个宽度（在它减半之前）在尺寸上），这是造成图像右侧大空间的原因。

你需要给图像div一个宽度，也要删除其中一个宽度或高度限制，否则你的图像可能会失去宽高比

＆＃13;

＆＃13;

.container {
  display: flex;
  width: 100%
}

#image {
  flex-basis: 150px;
}

#text {
  display: flex;
  flex-grow: 1;
  padding-left: 20px;
  flex-wrap: wrap;
}

#text>h2,
#text>p {
  width: 50%;
  margin: 0;
}

#text .right {
  text-align: right;
}

＆＃13;

<div class="container">
  <div id="image">
    <img width="100%" src="https://lh3.googleusercontent.com/yJWb9F4zy-2hXiqojIvtlUeSsBrfnjF6FThB3ZZ6aR--YJjo1ftT4wB2u0f4Ob6yyw=w300">
  </div>
  <div id="text">
    <h2>Nom de l'activité</h2>
    <p class="right">4 participants | 1 place disponible </p>
    <p>Descriptif de l'activité</p>
    <p class="right"><strong>Prix</strong></p>
    <input type="text" placeholder="Votre commentaire">
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;