CSS位置浮动

Question

我尝试显示左，右区，但它不与柯特斯“右”和“左”

我试过position :absolute实际工作，但它显示了我一些奇怪的

也许我我做错了我的竞争对手div或我的分区element1

有人知道我怎么能做到这一点？

#conteneur { 
 
    padding-top: -25px; 
 
    display: flex; 
 
    border: 2px solid black; 
 
    padding-bottom: 10px; 
 
} 
 

 
#element1 { 
 
    display: block; 
 
    width: 350px; 
 
    border: 1px solid black; 
 
} 
 

 
.right { 
 
    float: left; 
 
    width: 100%; 
 
} 
 

 
.left { 
 
    float: right; 
 
    width: 100%; 
 
}

<div id="conteneur"> 
 

 
    <div id="element1"> 
 
    <img src="{{ public_path('../public/uploads/logo-FFRXIII-2017-01.png')}}" style="max-width: 300px;"> 
 

 
    <div id="right"> 
 
     adresse_right 
 
    </div> 
 

 
    <div id="left"> 
 
     adresse_left 
 
    </div> 
 
    </div> 
 
</div>

的

Answer 1

首先你

<div id="right"> 
    adresse_right 
</div> 

<div id="left"> 
    adresse_left 
</div> 

将不会对你的CSS反应，因为这些ID和你CSS你正在努力寻找classes与.选择。因此请将.更改为#或将ID标签更改为Classes。

其次我创建了jsfiddle并编辑了你的代码，希望这有助于！

Answer 2

您使用flexbox，所以用flexbox坚持，忘记floats

#conteneur { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    justify-content: space-between; 
 
    width: 100%; 
 
    border: 1px solid black; 
 
    padding-bottom: 10px; 
 
} 
 

 
.img { 
 
    flex: 0 100%; 
 
} 
 

 
img { 
 
    max-width: 300px; 
 
}

<div id="conteneur"> 
 
    <div class="img"> 
 
    <img src="http://placehold.it/300x200"> 
 
    </div> 
 
    <div class="right"> 
 
    adresse_right 
 
    </div> 
 
    <div class="left"> 
 
    adresse_left 
 
    </div> 
 
</div>