Question

我有一个4-col页面，我正在插入内容。它工作正常，但我不能让我的第一个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>

Answer 1

由于未明确声明，您可能需要将// removed import ... export default class MyClass extends React.Component { ... componentDidMount() { const MyWindowDependentLibrary = require( 'path/to/library' ); MyWindowDependentLibrary.doWork(); } ... }添加到vertical-align: top元素。

e.g。

inline-block

此处它适用于您的代码：

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

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

如何让我的文字与顶部对齐？

1 个答案: