Question

我尝试显示一个左右区域，但它实际上没有使用cotes＆＃34; right＆＃34;和＆＃34;离开＆＃34;

我尝试了position :absolute，但它显示了一些奇怪的内容

也许我对我的竞争div或我的div element1

做错了

有人知道如何实现这一目标吗？

＆＃13;

#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%;
}

＆＃13;

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

＆＃13;

Answer 1

您正在使用flexbox，因此坚持flexbox并忘记floats

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

首先是你的

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

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

不会对您的CSS做出反应，因为这些是ID，而CSS您尝试使用classes选择器查找.。因此，将.更改为#或将ID代码更改为Classes。

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

CSS位置浮动

2 个答案: