如何對齊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; 
     }