将固定宽度的div浮动到未知宽度的div

arnoapp 发表于 Dev

阿诺纳普

如果剩余足够的空间，我想将div固定宽度的div浮动在具有未知宽度的div右侧。我的代码是：

#wrapper {
  float: left;
}
#description {
  float: left;
  overflow: hidden;
}
#preview {
  display: inline;
  float: right;
  background-color: black;
  background-repeat: no-repeat;
  background-size: contain;
  height: 483px;
  width: 239.5px;
}

<div id="wrapper">
  <div id="description">
    <div id="paragraph1">
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
      sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
      rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    </div>
    <br>
    <div id="paragraph2">
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
      sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
      rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    </div>
    <br>
    <div id="paragraph3">
      Lorem ipsum
      <ul>
        <li>Lorem ipsum dolor sit amet.</li>
        <li>DLorem ipsum dolor sit amet.</li>
        <li>ILorem ipsum dolor sit amet.</li>
        <li>Lorem ipsum dolor sit amet.</li>
      </ul>
    </div>
  </div>
  <div id="preview">
    <img src="screen.png">
  </div>
</div>

它希望div预览浮动到描述文本的左边。重要的是，我不仅要使用img标签，而且还要使用div。

奥斯汀

干得好：

http://jsfiddle.net/austinthedeveloper/w2aom5a5/1/

问题是您在浮动另一个div：

#wrapper {
    float:left;
}
#description {

}
#preview {
    display: inline-block;
    float: right;
    background-color: black;
    background-repeat: no-repeat;
    background-size:contain;
    height: 483px;
    width: 239.5px;
}

移除#description上的浮动内容并将图像容器移至顶部后，它将开始工作。我也将#preview更改为inline-block。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。