1

如何将图像对齐到左侧，将一些文本对齐到右上，一些文本在右下？父 div 有一个背景图像。

<div id="parent" style="background: url(bg.jpg) repeat-x left top"> 
   <img src="a.png"> <!--align left-->
    "Some text A" <!-- align on right top -->
    "Some text B" <!-- align on right bottom -->
</div>

提前致谢 ：）

4

4 回答 4

4

看看这个小提琴

http://jsfiddle.net/qMXZv/1/

<div id="parent" style="position:relative;width:300px;height:300px;background: url(http://wallpaperplus.org/wp-content/gallery/019-wallpaper-wallpaper-03/desktop-wallpaper-52.jpg) repeat-x left top"> 
   <img width=100 height=300 src="http://stichtingpani.nl/wp-content/uploads/2011/11/google_logo.jpg" align="left"> <!--align left-->
    <span style="position:absolute;top:10px;"> "Some text A"</span> <!-- align on right top -->
    <span style="position:absolute;bottom:10px;v-align:top;">"Some text B" </span><!-- align on right bottom -->
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

编辑

我已经更新了示例

编辑 2

您需要指定您的父 div 是position:relative这样做是使所有“绝对”定位的元素绝对定位到容器 div，而不是浏览器视口的右上角。

然后指定容器 div 的宽度和高度，以便占用您希望占用的空间。而且你总是知道你在做什么。

然后在文本上添加跨度容器并将它们绝对定位到顶部和底部。这样它就会与顶部和底部对齐。

<img>标签需要参数向左对齐，align="left"文本向右对齐。

于 2012-10-12T07:25:09.493 回答
3

你可以尝试这样的事情：我的小提琴

预览

在此处输入图像描述

CSS

.text1 {
position: relative;
    right: 0px;
    display: block;
}
.text2 {
position: relative;
    top: 20px;
    display: block;
}

HTML

<div id="parent" style="background: url("") repeat-x left top"> 
   <img src="http://upload.wikimedia.org/wikipedia/commons/1/19/Crystal_folder_image.png" style="float: left;"> <!--align left-->
    <span class="text1">"Some text A"</span> <!-- align on right top -->
    <span class="text2">"Some text B"</span> <!-- align on right bottom -->
</div>​

​</p>

于 2012-10-12T07:27:48.667 回答
1

是否可以稍微更改您的 HTML？像这样的东西：

HTML

<div id="parent" style="background: url(bg.jpg) repeat-x left top"> 
    <div class="right">"Some text A" <!-- align on right top --></div>
    <div><img src="a.png"> <!--align left--></div>
    <div class="right">"Some text B" <!-- align on right bottom --></div>
</div>

CSS

.right {text-align: right;}

小提琴：http: //jsfiddle.net/4PTgj/

或者，如果您希望文本在图像中对齐，那么 CSS 中的另一个细微变化：

#parent {position: relative;}
.right {text-align: right; position: absolute; bottom: 0; right: 0;}
.right:first-child {bottom: auto; top: 0;}​

小提琴：http: //jsfiddle.net/4PTgj/1/

于 2012-10-12T07:28:21.493 回答
0

你可以试试这样的

<div id="parent" style="background: url(bg.jpg) repeat-x left top"> 
   <span style="float:right">"Some text A"</span>  <!-- align on right top -->
   <img src="http://static.adzerk.net/Advertisers/e395a21294854772970cdd37e15bbb78.png"> <!--align left-->

    <span style="float:right">"Some text B"</span> <!-- align on right bottom -->
</div>​

演示：http: //jsfiddle.net/kbpBK/1/

于 2012-10-12T07:26:38.687 回答