テキストを一番上に整列させるにはどうすればよいですか？

4桁のページがあり、コンテンツを挿入しています。それは正常に動作しますが、最初のdivをインラインブロックの先頭に合わせることはできません。私はかなり初心者なので、何かが足りないと思っています。（0詰めを試しました。）ありがとうございました。ミルクテキストを一番上に整列させるにはどうすればよいですか？

<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

それが明示的に宣言されていないので、おそらくinline-block要素にvertical-align: topを追加する必要があります。

後https://jsfiddle.net/hu6yosgq/1/

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

出典

2016-10-22 16:54:50 Luke

OMG前

：ここではそれはあなたのコードに適用される

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

。良い仕事。私は完全なクルッツを感じる。迅速な返信をありがとう。 –

問題はない、私は最近、何か似たようなものにこだわってしまったので、それは私の心の中で新鮮だった！ – Luke

テキストを一番上に整列させるにはどうすればよいですか？

答えて

関連する問題