允许<div>中的图像比同一<div>中的文本行宽

Question

我希望将文本放在a <div>的宽度中<div>,但是将图像放在父图像<div>的宽度上 <div>

这个图表应该清楚:

http://dl.dropbox.com/u/2792776/screenshots/2012-01-22_1838.png

(如果它太小,这里是URL:http://dl.dropbox.com/u/2792776/screenshots/2012-01-22_1838.png)

Answer 1

我会解决这两种方式之一.这是想法#1:

CSS

#inner {width:400px; position:relative; float:left;}

HTML:

<div id="inner">
    <img src="awesomeimage.jpg" alt="this awesome image" />
    <p>text goes here</p>
    <img src="awesomeimage.jpg" alt="this awesome image" />
</div>

脚本:

<script>
var imgWidth = $(window).outerWidth();
$('#inner > img').css({
    width : imgWidth + 'px'
});
</script>

这假设您已经加载了jQuery,并且您正在使用您网站上的Javascript.如果要调整图像的宽度,对于填充,边距和边框,请在变量中执行此操作.

您可以使用窗口进行图像缩放,就像我为另一个问题创建的JS小提琴中使用的示例一样:http://jsfiddle.net/D544n/1/

想法#2:使用Javascript.

CSS

#outer {width:100%;} /* Outer becomes irrelevant */
#inner {width:100%;}
#inner img {width:100% !important}
#inner * {width:400px;} /* Set all childs to 400 */

HTML:

<div id="outer">
    <div id="inner">
        <img src="awesomeimage.jpg" alt="this awesome image" />
        <p>text goes here</p>
        <img src="awesomeimage.jpg" alt="this awesome image" />
    </div>
</div>

这个选择器是从另一个SO问题中获取的.

我不认为你会找到一个清晰,简单的方法来做到这一点.这是我最好的两个想法,可以通过其他方式解决.如果您要沿着这条道路前进来整理您的内容,您可能需要重新考虑您的策略以实现您的目标.

Answer 2

如果你完全摆脱内部div但在外部div中的所有p标签上放置400px的宽度怎么办？然后事情会正确流动,图像将成为外部div的子项,因此它们可能受到宽度的限制.

当然,如果有很多其他元素需要包含在400px区域内,这可能会导致一些问题,但如果它只是段落和一些标题,那么你就设置了.

Answer 3

编辑

我改进了我的方法.我的灵感来自于亚当邓恩的答案.
你需要做的就是img用一个包装<div class="sanitize">|</div>.要么在服务器端(推荐),要么使用一点jQuery 包装调用(作为家庭作业留给读者).也不要div只允许ps.

秘密是:

• div.border如果您需要,请将边框/背景分开
• 覆盖max-width到inherit !important

http://jsfiddle.net/HerrSerker/PSPyZ/9/

HTML

<div class="container">
    <div class="border"></div>
    <div class="inner">
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. .</p>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut        <div class="sanitize">
            <img src="http://lorempixel.com/800/200/sports/2" /></div>
        </p>
        <div class="sanitize"><img src="http://lorempixel.com/800/200/sports/2" /></div>
        <p>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.</p>        
    </div>
    <br clear="left" />
</div>?

CSS

.container {
    position: relative;
    width: auto;
    border: 1px solid red;
}
.container > .inner {
    border: 1px solid gold;
    width: 100%;
    min-width: 400px;
}
.container > .inner > * {
    max-width: 400px;
}
.container > .inner .sanitize {
    position: relative;
    max-width: inherit !important;
    border: 1px solid green;
    width: 100%;
}

.container > .inner .sanitize > img {      
    display: block;
    width: 100%;  
}
.container > .border {
    width: 400px;
    position: absolute;
    top: 1px;
    left: 1px;
    bottom: 1px;
    height: 100%;
    border: 1px solid silver;
}?

第一个答案

为什么不呢？
请看这里的例子:http://jsfiddle.net/HerrSerker/PSPyZ/

Answer 4

您可以使用 CSS 溢出属性来允许内容溢出容器的范围。尝试overflow: visible一下你的内在 div。