放置元素（自定义位置）

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为这个 - 用于定位的浮动div不再需要使用css3。

此外，您还有一个问题，您将图像设置为50％ - 因为您尚未设置图像div的宽度，导致图像div占据图像的整个宽度在大小减半），这是造成图像右侧大空间的原因。

要么你需要给图像div的宽度，也或者删除的宽度或高度的制约因素之一，否则您的图像可能会失去它的长宽比

.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; 
 
}

<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>