如何对齐div中的文本
我试图显示4张带有标题,描述和删除链接的图片。我无法在我有的框中获得float right
的链接。如何对齐div中的文本
这里的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次以上。我怎样才能让第三个跨度链接浮动到左边?任何帮助都会很棒。
首先,你在哪里使用.alignleft
我你的代码提供了吗?
其次,.alignright
范围有两类:img-info
和alignright
。对于img-info
你有display-block
。这是多余的,因为float
属性将使元素display-block
。
所有你需要做的就是将overflow: hidden
添加到你的主div(图像容器)。应用于链接的浮动使其表现得好像不在同一个“图层”中一样。添加overflow-hidden
将解决此问题。的jsfiddle - http://jsfiddle.net/piedoom/6jTyD/
感谢您的输入'floatleft'正在代码中使用,我没有显示。我很抱歉,我很懒,没有拿出这个代码。 @howlin的想法是我试图实现的样子。非常感谢你。 –
没问题,很高兴你想出了一个解决方案。快乐编码:-) –
我实际上遇到了这样的问题。我用你的,它像一个魅力。 –
使用text-align:
.alignleft {
text-align: left;
}
.alignright {
text-align: right;
}
float
是更好地用于当你想要一个像去的权利,并希望文本周围等流,因为它也导致其他布局的问题,还不如尝试text-align
。
试试这个真的速战速决,但是,您可能要修改的宽度和这样的:
DEMO: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;
}
添加的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;
}
我喜欢你的答案。这对我有用。太棒了。非常感谢。 –
创建小提琴.. –
@Irfan意味着重复上http://jsfiddle.net/ – steinmas
如何代码困难的是复制和粘贴两件事,哈哈? –