CSS：将文字对齐的图像填充文本

我正在使自己成为一个网站，但我有点卡在我遇到的问题上。CSS：将文字对齐的图像填充文本

在一个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的右下角对齐，但是di的高度v低于图像的高度。此外，文字只是通过图像。

来源

2013-05-19 user2399084

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

1）填充右添加到部分，因此它不与所述图像重叠。

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

2）当你添加一个div和漂浮在它的浮点从文档的流动去除图像，所以你需要添加另一个内部DIV具有相同高度或作出的DIV的高度相同的高度，你的图像或只需添加一个浮格..

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

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

来源

2013-05-19 15:00:15

它的工作，感谢您的帮助！ – user2399084

但没有问题状态的图像宽度是可变的？ – Onheiron

我能想到的与可变图像的宽度和文字数量的方式，但它需要一些重复在标记中。

要点是，你右浮动图像的隐藏的版本，然后用溢出：隐藏，这样对浮动的不段在它之下流动。然后，我们使用绝对定位放置图像的非隐藏版在容器的底部。

我已经准备了样机在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>

你还可以使用CSS表格尝试纯CSS的解决方案，如果你没有支持IE7，但除此之外，这应该降低工作IE6如果你使用visibility：hidden的赞成混浊，并添加放大：1的段落样式。

来源

2013-05-19 15:08:02

这样的想法，它允许灵活的图像尺寸：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>

来源

2013-05-19 15:12:03 Timidfriendly

我不我是正确的事情，但你可以通过浮动权和边距实现这一目标。

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

检查了这一点：http://jsfiddle.net/wrujx/

来源

2013-05-19 15:18:08

我认为最好的解决办法是使用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简单而简单，没有额外的标签和杂乱的定位。

来源

2013-05-19 15:59:24 Onheiron

CSS：将文字对齐的图像填充文本

回答

相关问题