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

【问题标题】：Float div with fixed width right to div of unknown width将固定宽度的 div 浮动到未知宽度的 div
【发布时间】：2014-12-16 02:14:00
【问题描述】：

如果剩余空间足够，我想在宽度未知的 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 预览浮动到描述文本的左侧。重要的是我使用 div 而不仅仅是普通的 img 标签。

【问题讨论】：

你想让预览 div 在描述 div 里面吗？？？
右边旁边没有
ok..但是，div 的默认宽度将始终为 100%；
啊，好吧，我错过了一点：我可以使用一些东西作为描述 div 的宽度，例如：100%-previewDivWidth
这是您需要的吗？ JSFiddle

标签： html css

【解决方案1】：

给你：

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。

【讨论】：

【解决方案2】：

如果您无法为#description 设置尺寸：

在你的html中将#preview放在#description之前并删除他的float: left。

【讨论】：

【解决方案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>

【讨论】：