如何讓我的文字對齊頂部？

我有一個4頁的頁面，我正在插入內容。它工作正常，但我無法讓我的第一個div在內嵌塊中排在最前面。我很新手，所以我想我錯過了一些東西。（嘗試填充0;在div。）謝謝。米爾特。如何讓我的文字對齊頂部？

<html> 
<style> 

html, body, #content { margin: 0px; height: 100%; width: 100%; padding: 0px;} 

div.outer { background-color: lightgreen } 
div.inner { display: inline-block; } 
div.WebTopic { width: 190px;} 

.col { 
    position: absolute; 
    top: 0px; bottom: 0px; 
    margin: left: 10px; 
    border: 1px solid black; 
    background-color: seashell; 
} 

.col-1 { left: 0px;   width: 400px; top: 0px;} 
.col-2 { left: 401px;  width: 200px; top 0px; } 
.col-3 { left: 601px;  width: 400px; } 
.col-4 { left: 1001px;  width: 50px; } 

</style> 

<body> 
<div id="content"> 
     <div class="col col-1"> 
       <div class="outer"> 
       <div class="inner"> 
        <div class="WebTopic"> 
          <p>??? Why is this at the foot of the frame? Would like it at top.</p> 
        </div> 
      <p class="fanRating">HTML Fan rated #1</p> 
</div> 


<div class="inner"> 
<div class="WebTopic"> 
<p>CSS is used for describing the presentation of web pages. The CSS tutorial section will help you learn the essentials of CSS, so that you can fine control the style and layout of your HTML document.</p> 
</div> 
<p class="fanRating">CCS Fan Rated #3</p> 
</div> 

</div>  <!-- OUTER 1 END --> 

<p>Stuff here in usual block mode</p> 

    <!-- OUTER 2 START --> 

<div class="outer"> 
       <div class="inner"> 
        <div class="WebTopic"> 
          <p>HTML is a markup language that is used for creating web pages. </p> 
        </div> 
      <p class="fanRating">HTML Fan rated #1</p> 
</div> 


<div class="inner"> 
<div class="WebTopic"> 
<p>CSS is used for describing the presentation of web pages. Loads more words. Loads more words. Loads more words. Loads more words. Loads more words. Loads more words. Loads more words. </p> 
</div> 
<p class="fanRating">CCS Fan Rated #3</p> 
</div> 

</div>  <!-- OUTER 2 END --> 


     </div> 
     <div class="col col-2"> 
      COLUMN 2 ------------- 
     </div> 

<!-- COLUMN 3 START --> 

     <div class="col col-3"> 
       <div class="outer"> 
       <div class="inner"> 
        <div class="WebTopic"> 
          <p>??? Why is this at the foot of the frame? Would like it at top. Tons of text. Tons of text. Tons of text. Tons of text. Tons of text. </p> 
        </div> 
      <p class="fanRating">HTML Fan rated #1</p> 
</div> 

<div class="inner"> 
<div class="WebTopic"> 
<p>CSS is used for describing the presentation of web pages. The CSS tutorial section will help you learn the essentials of CSS, so that you can fine control the style and layout of your HTML document.</p> 
</div> 
<p class="fanRating">CCS Fan Rated #3</p> 
</div> 

</div>  
     </div> 
     <div class="col col-4"> 
      COL 4 
     </div>  

</body> 
<html>

來源

2016-10-22 Milton Valler

，因爲它沒有明確地宣佈，你可能需要添加vertical-align: top到inline-block元素。

例如

div.inner { 
    display: inline-block; 
    vertical-align: top; 
}

這適用於您的代碼：

前：https://jsfiddle.net/hu6yosgq/1/

後：https://jsfiddle.net/hu6yosgq/2/

來源

2016-10-22 16:54:50 Luke

OMG。效果很好。我感覺到一種徹頭徹尾的感覺。感謝您的快速回復。 –

沒問題，我最近陷入了類似的事情，所以它在我心中是新鮮的！ – Luke

如何讓我的文字對齊頂部？

回答

相關問題