2

我正在使自己成为一个网站，但我有点卡在我遇到的问题上。

在 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 的高度低于图像的高度。文本也只是通过图像。

4

5 回答 5

1

你需要做几件事来解决这个问题。

1) 将 padding-right 添加到该部分，使其不与图像重叠。

#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/

于 2013-05-19T15:00:15.377 回答
1

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

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

我在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 解决方案，但如果您使用可见性：隐藏以支持不透明度，并在段落样式中添加缩放：1，则这应该适用于 IE6 .

于 2013-05-19T15:08:02.490 回答
0

我不认为我是正确的，但您可以通过浮动右和边距顶部来实现。

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

看看这个：http: //jsfiddle.net/wrujx/

于 2013-05-19T15:18:08.017 回答
0

这个想法允许灵活的图像大小：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-19T15:12:03.543 回答
0

我认为最好的解决方案是使用一点 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)

这样你就可以简单明了，没有额外的标签和凌乱的定位。

于 2013-05-19T15:59:24.037 回答