Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

它希望div预览浮动以留下描述文本。重要的是我使用div而不仅仅是普通的img标签。

Answer 1

如果你不能把尺寸改为#description：

将#preview放在你的html之前#description，然后移除他的float: left。

Answer 2

你走了：

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。

Answer 3

您可以使用display: table和display: table-cell。这样您就不必更改div的顺序：

#wrapper {
  display: table;
  width: 100%;
}
#description {
  display: table-cell;
}
#preview {
  display: table-cell;
  width: 239.5px;
  height: 483px;
  background-color: black;
}

<div id="wrapper">
  <div id="description">
    <!-- dummy content -->
    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>
  <div id="preview">
    <!-- dummy image -->
  </div>
</div>

具有固定宽度的浮动div直到未知宽度的div

3 个答案: