[英]how to align text in div
Im trying to display 4 pictures with a title, description and a delete link on it. 我试图显示4张带有标题,描述和删除链接的图片。 I cannot get the link to
float right
in the box I have. 我无法将链接
float right
到我所拥有的框中。
here's the html 这是html
<div id="container">
<div class="image-wrapper">
<div id="image-container">
<img src="gallery_traditional_1.jpg" width="200" height="100"><br>
<span class="img-info">Title:</span>
<span class="img-info">Description:</span>
<span class="img-info alignright"><a href="#">Delete</a></span>
</div>
</div>
</div><!--end container -->
here's the css 这是css
#container {
width: 50%;
}
.image-wrapper {
display: inline-block;
width:200px;
padding: 10px;
}
#image-container {
color: #898989;
background:#F9F9F9;
border: solid 1px #ddd;
border-radius:10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
box-shadow: 0px 0px 10px #888;
-moz-box-shadow: 0px 0px 10px #888;
-webkit-box-shadow: 0px 0px 10px #888;
margin:5px auto;
padding:5px;
width:200px;
}
.img-info {
display: block;
}
.alignleft {
float:left;
}
.alignright {
float:right;
}
The html of the picture box gets repeated 3 more times. 图片框的html重复了3次。 How can I get the third span link float to the left?
如何将第三个跨度链接浮动到左侧? Any help would be great.
任何帮助都会很棒。
Adding margin-top: -29px; 添加margin-top:-29px; should achieve this.
应该实现这一点。
DEMO http://jsfiddle.net/4RZJx/1 DEMO http://jsfiddle.net/4RZJx/1
HTML: HTML:
<div id="container">
<div class="image-wrapper">
<div id="image-container">
<img src="gallery_traditional_1.jpg" width="200" height="100"><br>
<span class="img-info">Title:</span>
<span class="img-info">Description:</span>
<span class="img-info"><a href="#">Delete</a></span>
</div>
<span class="img-info alignright"><a href="#">Delete</a></span>
</div>
<div class="image-wrapper">
<div id="image-container">
<img src="gallery_traditional_1.jpg" width="200" height="100"><br>
<span class="img-info">Title:</span>
<span class="img-info">Description:</span>
<span class="img-info">Description:</span>
</div>
<span class="img-info alignright"><a href="#">Delete</a></span>
</div>
<div class="image-wrapper">
<div id="image-container">
<img src="gallery_traditional_1.jpg" width="200" height="100"><br>
<span class="img-info">Title:</span>
<span class="img-info">Description:</span>
</div>
<span class="img-info alignright"><a href="#">Delete</a></span>
</div>
<div class="image-wrapper">
<div id="image-container">
<img src="gallery_traditional_1.jpg" width="200" height="100"><br>
<span class="img-info">Title:</span>
<span class="img-info">Description:</span>
</div>
<span class="img-info alignright"><a href="#">Delete</a></span>
</div>
</div><!--end container -->
CSS: CSS:
#container {
width: 50%;
}
.image-wrapper {
display: inline-block;
width:200px;
padding: 10px;
}
#image-container {
color: #898989;
background:#F9F9F9;
border: solid 1px #ddd;
border-radius:10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
box-shadow: 0px 0px 10px #888;
-moz-box-shadow: 0px 0px 10px #888;
-webkit-box-shadow: 0px 0px 10px #888;
margin:5px auto;
padding:5px;
width:200px;
}
.img-info {
display: block;
}
.alignleft {
clear: both;
float:left;
}
.alignright {
float:right;
margin-top: -29px;
}
Use text-align:
使用
text-align:
.alignleft {
text-align: left;
}
.alignright {
text-align: right;
}
float
is better used for when you want a image to go to the right, and want text to flow around it etc. As it also cause other layout problems, you might as well try text-align
. 当你想要一个图像向右移动,并希望文本在它周围流动等时,
float
更好用。因为它还会导致其他布局问题,你也可以尝试text-align
。
Try this really quick fix, however, you may want to modify the widths and such: 试试这个非常快速的修复,但是,您可能想要修改宽度等:
DEMO: http://jsfiddle.net/4RZJx/ 演示: http : //jsfiddle.net/4RZJx/
<div id="container">
<div class="image-wrapper">
<div id="image-container">
<img src="gallery_traditional_1.jpg" width="200" height="100"><br>
<div class="info-container">
<div class="alignleft">
<span class="img-info">Title:</span>
<span class="img-info">Description:</span>
</div>
<span class="img-info alignright"><a href="#">Delete</a>
</span>
</div>
</div>
</div>
</div><!--end container -->
CSS: CSS:
#container {
width: 50%;
}
.image-wrapper {
display: inline-block;
width:200px;
padding: 10px;
}
#image-container {
color: #898989;
background:#F9F9F9;
border: solid 1px #ddd;
border-radius:10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
box-shadow: 0px 0px 10px #888;
-moz-box-shadow: 0px 0px 10px #888;
-webkit-box-shadow: 0px 0px 10px #888;
margin:5px auto;
padding:5px;
width:200px;
}
.info-container{
overflow: hidden;
}
.img-info {
display: block;
}
.alignleft {
float:left;
}
.alignright {
float:right;
}
First of all, where are you using .alignleft
in your code provided? 首先,您在提供的代码中使用
.alignleft
在哪里?
Secondly, the .alignright
span has two classes: img-info
and alignright
. 其次,
.alignright
span有两个类: img-info
和alignright
。 For img-info
you have display-block
. 对于
img-info
你有display-block
。 This is redundant, as the float
property will make an element display-block
. 这是多余的,因为
float
属性将使元素display-block
。
All you need to do is add overflow: hidden
to your main div (image-container). 您需要做的就是添加
overflow: hidden
到您的主div(图像容器)。 The float applied to the link makes it act as though it's not in the same "layer". 应用于链接的浮动使其表现得好像它不在同一“层”中。 Adding
overflow-hidden
will fix this problem. 添加
overflow-hidden
将解决此问题。 Jsfiddle - http://jsfiddle.net/piedoom/6jTyD/ Jsfiddle - http://jsfiddle.net/piedoom/6jTyD/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.