Question

我正在尝试将图片对齐到段落的右侧。这一切都很完美，但问题是我希望它“响应”，因为有时根本没有任何图像，所以我希望文本填充白色区域。另一个注意事项是，有多少图像总是不同。这很难解释，但我希望你理解它。

这是一个plunker所以你可以尝试一下。在plunker它完美无缺，但如果下一张幻灯片没有图像则没有，那么就会有一个很大的白色区域。

HTML code：

<body>
  <div>
    <div class="slideHeader">
      <img align="left" style="padding-right: 20px;" src="https://cdn3.colorlib.com/dazzling/wp-content/uploads/sites/6/2013/03/image-alignment-150x150.jpg">
      <h1 style="padding-left: 20px;">Hello world!</h1>
    </div>
    <div class="slideContent">
        ...
    </div>
    <div class="slideImages">
      <div>
        <img src="http://revistasindromes.com/images/100x100.gif">
      </div>
      <div>
        <img src="http://revistasindromes.com/images/100x100.gif">
      </div>
    </div>
  </div>
</body>

CSS代码：

body {
  margin: 0;
  padding: 0;
}

.slideHeader {
  background-color: blue;
  position: absolute;
  top: 0;
  left: 0;
  height: 150px;
  width: 100%;
}

.slideContent {
  top: 150px;
  position: absolute;
  padding-left: 25px;
  padding-right: 150px;
  background-color: white;
}

.slideImages {
  position: absolute;
  top: 150px;
  right: 25px;
}

有图像时我希望它看起来的示例：

当没有图像时我希望它看起来的示例：

（一直到右边，没有空格）

Answer 1

无需每次都使用position: absolute;。

<强> Demo

以下是更新的代码：

<强> HTML：

<div>
    <div class="slideHeader">
      <img align="left" style="padding-right: 20px;" src="https://cdn3.colorlib.com/dazzling/wp-content/uploads/sites/6/2013/03/image-alignment-150x150.jpg">
      <h1 style="padding-left: 20px;">Hello world!</h1>
    </div>
    <div class="slideImages">
      <div>
        <img src="http://revistasindromes.com/images/100x100.gif">
      </div>
      <div>
        <img src="http://revistasindromes.com/images/100x100.gif">
      </div>
    </div>
    <div class="slideContent">
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis,
      sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.
      Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet.
      Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.
    </div>

  </div>

<强> CSS：

* {
  margin: 0;
  padding: 0;
}
.slideHeader {
  background-color: blue;
  height: 150px;
  width: 100%;
}
.slideContent {
  padding-left: 25px;
}
.slideImages {
  float:right;
  padding:10px;
}

Answer 2

如果您希望内容彼此包围，请使用float而不是绝对定位。

.slideContent {
  padding-left: 25px;
  padding-right: 25px;
  background-color: white;
  overflow: hidden;
}

.slideImages {
  float: right;
}

http://jsfiddle.net/2gg2e7e8/

Answer 3

您可以使用以下代码：

if ($('.slideImages').lenght) {
  // code here if slideimage have          
    }
    else {
   // code here if slideimage don't have          
    }

显示段落旁边的图像

3 个答案:

您可以使用以下代码：