Question

我正在使自己成为一个网站，但我对我遇到的问题感到有些困惑。

在div中我有一个高度可变的文本块。在文本的右侧，我想将图像宽度定位为可变宽度和宽度。高度。它必须与底部对齐图像上方可能没有任何文字。

需要像这样：https://www.dropbox.com/s/pqpttrvefrvci52/example.jpg

以下是我目前的代码：

HTML：

<div id="section">
   <div id="image">
      <img src="example.jpg" alt="image"/>
   </div>
   <p>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam congue, nisl et facilisis commodo, sem tortor suscipit massa, nec rutrum eros nunc et orci.
   Maecenas nibh erat, pulvinar sed aliquam at, malesuada nec nibh.Curabitur fringilla justo odio. Aenean tristique consequat lorem vel tincidunt.
  </p>
</div>

CSS

#section {
    position: relative;
}
#image {
    float: right;
    margin-left: 20px;
    position: absolute;
    bottom: o;
    right: 0;
}

使用此代码，图像与div的右下角对齐，但div的高度低于图像的高度。文本也只是通过图像。

Answer 1

你需要做一些事来解决这个问题。

1）向部分添加填充权限，使其不与图像重叠。

#section {
    position: relative;
    padding-right:<at least image width so the text doesn't overlap>
}

2）当你添加一个div并浮在其中时，浮动从文档流中删除图像，因此你需要添加另一个具有相同高度的内部div或使div的高度与你的高度相同图像或只是添加一个浮动div ..

<div id="image">
   <img src="example.jpg" alt="image"/>
   </div>
   <div style="clear:both"></div>
</div>

这是一个有效的解决方案：http://jsfiddle.net/zV3wm/

Answer 2

我可以想到一种可变图像宽度和文本量的方法，但它需要在标记中有一些重复。

要点是你正确浮动图像的隐藏版本，然后使用overflow：hidden使得反对浮动的段落不会在它下面流动。然后，我们使用绝对定位将图像的非隐藏版本放置在容器的底部。

我已在http://jsfiddle.net/UmGNZ/准备了一个模型（我已经将隐藏的图像部分不透明，因此您可以看到它被添加到文档中的位置），但对于伪HTML示例：

<container with position:relative>
    <right-float>
        <hidden img tag with opacity: 0 />
        <actual img tag with absolute positioning, bottom: 0, right: 0 />
    </right-float>
    <p with overflow:hidden (or auto) />
</container>

如果你不必支持IE7，你也可以尝试使用CSS表的纯CSS解决方案，但如果你使用可见性，这应该适用于IE6：隐藏有利于不透明度，并添加缩放：1到段落风格。

Answer 3

这个想法允许灵活的图像大小：http://jsfiddle.net/David_Knowles/F3zZU/4/

.cell {display:table-cell;}

#section {
    position: relative;
    width:300px;
}
#image {
    vertical-align: bottom;
}

<div id="section">
   <div class="cell">
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam congue, nisl et facilisis commodo, sem tortor suscipit massa, nec rutrum eros nunc et orci.Maecenas nibh erat, pulvinar sed aliquam at, malesuada nec nibh.Curabitur fringilla justo odio. Aenean tristique consequat lorem vel tincidunt.</p>
    </div>
    <div id="image" class="cell">
        <img src="http://placeimg.com/120/80/any" alt="image"/>
    </div>
</div>

Answer 4

我不认为我是正确的，但你可以通过浮动右边和边缘顶部实现这一点。

#img {
    float: right;
    margin-top: -140px;
}

检查出来：http://jsfiddle.net/wrujx/

Answer 5

我认为最好的解决方案是使用一点jQuery（JavaScript）并让每个部分完成它的工作，尽可能简单。这就是你所拥有的：

<强> HTML

<div id="wrapper">

    <p>yourtexthere</p>
    <img src="whatever.jpg"/>

</div>

<强> CSS

#wrapper{

    width:600px;
    border:1px solid #000000;

}

p{

    display:inline-block;
    margin-right:20px;

}

img{

    vertical-align:bottom;

}

<强>的jQuery

var parentWidth = $('#wrapper').width()
var imgWidth = $('img').width()
$('p').width((parentWidth - imgWidth) - 20)

there you go简单明了，没有额外的标签和凌乱的定位。

CSS：将图像右下角的div填充文本

5 个答案: