1. 首頁
  2. 問答
  3. CSS：你如何排列4個div，但最後一個跨越2行？

CSS：你如何排列4個div，但最後一個跨越2行？

2010-09-14 79 views
0

在我下面的代碼中，如何獲取class =「author」中的文本，以便在class =「label」中的文本正下方對齊？ 「：」在‘的回答：。’謝謝CSS：你如何排列4個div，但最後一個跨越2行？

<html> 
<head> 
    <style type="text/css"> 
     .action { 
      display: inline; 
     } 

     .add-box { 
      margin-left: 40px; 
      display: inline; 

     } 
     .share-button { 
      margin-left: 30px; 
      display: inline; 
     } 
     .flag { 
      margin-left: 30px; 
      display: inline; 
     } 
     .author-area { 
      margin-left: 30px; 
      display: inline; 
     } 
     .label { 
      margin: 0; 
      display: inline; 
     } 
     .author { 
      margin: 0; 
     } 
     .gray-button { 
     background: #C0C0C0; 
     font-size: 14px; 
     margin:0; 
     padding: 10px; 
     border: 1px solid #C0C0C0; 
     -webkit-border-radius: 6px; 
     -moz-border-radius: 6px; 
     border-radius: 6px; 
     cursor: pointer; 
     } 
    </style> 
</head> 

<body> 
    <div class="action"> 
     <div class="add-box"> 
      <a href="#" class="gray-button">Plan</a> 
     </div> 
     <div class="share-button"> 
      <a> Share </a> 
     </div> 
     <div class="flag"> 
      <a>flag</a> 
     </div> 
     <div class="author-area"> 
      <p class="label">Answered by:</p> 
      <p class="author"><a href="#"></a>Author name </p> 
     </div> 
    </div> 

</body>

來源

2010-09-14 JMan

回答

1

你可以用「inline-block的」上「.author區」做的事情：

​​

'vertical-align'選項可以阻止div突破於其他之上。

來源

2010-09-14 05:29:15 sje397

+0

演示：http://jsfiddle.net/NJzRS/ – sje397 2010-09-14 05:35:40

0

即使世界一對夫婦的選擇，但您在「作者名」下面的例子中，「E」應該正下方的對齊可以嘗試浮動元素的左邊，並設置一個text-align:right到author-area DIV。

<style type="text/css"> 
    .action { 
     display: inline; 
     float: left; 
    } 
    .add-box { 
     margin-left: 40px; 
     display: inline; 
     float: left; 
    } 
    .share-button { 
     margin-left: 30px; 
     display: inline; 
     float: left; 
    } 
    .flag { 
     margin-left: 30px; 
     display: inline; 
     float: left; 
    } 
    .author-area { 
     margin-left: 30px; 
     display: inline; 
     float: left; 
     text-align: right; 
    } 
    .label { 
     margin: 0; 
     display: inline; 
    } 
    .author { 
     margin: 0; 
    } 
    .gray-button { 
    background: #C0C0C0; 
    font-size: 14px; 
    margin:0; 
    padding: 10px; 
    border: 1px solid #C0C0C0; 
    -webkit-border-radius: 6px; 
    -moz-border-radius: 6px; 
    border-radius: 6px; 
    cursor: pointer; 
    } 
</style>

來源

2010-09-14 05:26:13 sewa

相關問題

 相關問題