[英]how to align text in div
我试图显示4张带有标题,描述和删除链接的图片。 我无法将链接float right
到我所拥有的框中。
这是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 -->
这是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;
}
图片框的html重复了3次。 如何将第三个跨度链接浮动到左侧? 任何帮助都会很棒。
添加margin-top:-29px; 应该实现这一点。
DEMO http://jsfiddle.net/4RZJx/1
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:
#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;
}
使用text-align:
.alignleft {
text-align: left;
}
.alignright {
text-align: right;
}
当你想要一个图像向右移动,并希望文本在它周围流动等时, float
更好用。因为它还会导致其他布局问题,你也可以尝试text-align
。
试试这个非常快速的修复,但是,您可能想要修改宽度等:
演示: 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:
#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;
}
首先,您在提供的代码中使用.alignleft
在哪里?
其次, .alignright
span有两个类: img-info
和alignright
。 对于img-info
你有display-block
。 这是多余的,因为float
属性将使元素display-block
。
您需要做的就是添加overflow: hidden
到您的主div(图像容器)。 应用于链接的浮动使其表现得好像它不在同一“层”中。 添加overflow-hidden
将解决此问题。 Jsfiddle - http://jsfiddle.net/piedoom/6jTyD/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.