如何对齐div中的文本

Question

我试图显示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次以上。我怎样才能让第三个跨度链接浮动到左边？任何帮助都会很棒。

Answer 1

首先，你在哪里使用.alignleft我你的代码提供了吗？

其次，.alignright范围有两类：img-info和alignright。对于img-info你有display-block。这是多余的，因为float属性将使元素display-block。

所有你需要做的就是将overflow: hidden添加到你的主div（图像容器）。应用于链接的浮动使其表现得好像不在同一个“图层”中一样。添加overflow-hidden将解决此问题。的jsfiddle - http://jsfiddle.net/piedoom/6jTyD/

Answer 2

使用text-align:

.alignleft { 
    text-align: left; 
} 

.alignright { 
    text-align: right; 
} 

float是更好地用于当你想要一个像去的权利，并希望文本周围等流，因为它也导致其他布局的问题，还不如尝试text-align。

http://jsfiddle.net/4RZJx/3/

Answer 3

试试这个真的速战速决，但是，您可能要修改的宽度和这样的：

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; 
    } 

Answer 4

添加的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; 
     }