Question

我有一个父div和几个子div。我想让每个h2标签的顶部都一样。现在不是。

<div style="width: 10000em; margin-left: -5000em; position: relative; left: 50%; text-align: center;">
  <div style="display:inline-block;vertical-align:middle">
    <div style="float:left;top:0"><h2>L2</h2></div>
    gdgsdgsgsgsgs<br>gsgsgsgsdgsg<br>gsdgdsgdsgdsgd
  </div>

  <div style="display:inline-block;vertical-align:middle">
    <div style="float:left:top:0"><h2>R1</h2></div>
    gdgsdgsgsgsgs<br>gsgsgsgsdgsg
  </div>

  <div style="display:inline-block;vertical-align:middle">
    <div style="float:left:top:0"><h2>W1</h2></div>
    gdgsdgsgsgsgs
  </div>
</div>

Answer 1

将内联块设置为vertical-align:top;将为您解决问题。另外我想指出你在内联块内的div的内联css属性之间给出了冒号（:)而不是分号。所以，最终的代码应该如下：

<div style="width: 10000em; margin-left: -5000em; position: relative; left: 50%; text-align: center;">
    <div style="display:inline-block;vertical-align:top">
        <div style="float:left;top:0">
            <h2>L2</h2>
        </div>
        gdgsdgsgsgsgs<br>gsgsgsgsdgsg<br>gsdgdsgdsgdsgd
    </div>
    <div style="display:inline-block;vertical-align:top">
        <div style="float:left;top:0">
            <h2>R1</h2>
        </div>
        gdgsdgsgsgsgs<br>gsgsgsgsdgsg
    </div>
    <div style="display:inline-block;vertical-align:top">
        <div style="float:left;top:0">
            <h2>W1</h2>
        </div>
        gdgsdgsgsgsgs
    </div>
</div>

Answer 2

请检查以下代码。我刚刚更改了*

到http://localhost:8100。您错过了; 分号。我将您的内容添加到另一个style="float:left:top:0px"。

＆＃13;

style="float:left;top:0px"

＆＃13;

Answer 3

执行此操作的最佳方法是在父div中使用display flex和flex样式

＆＃13;

<div style="display: flex; align-items: baseline; justify-content:center; width: 100%;">
  <div style="display:inline-block;vertical-align:middle; padding: 16px;">
    <div style="float:left:top:0">
      <h2>L2</h2>
    </div>
    gdgsdgsgsgsgs
    <br>gsgsgsgsdgsg
    <br>gsdgdsgdsgdsgd
  </div>

  <div style="display:inline-block;vertical-align:middle; padding: 16px;">
    <div style="float:left:top:0">
      <h2>R1</h2>
    </div>
    gdgsdgsgsgsgs
    <br>gsgsgsgsdgsg
  </div>

  <div style="display:inline-block;vertical-align:middle, padding: 16px;">
    <div style="float:left:top:0">
      <h2>W1</h2>
    </div>
    gdgsdgsgsgsgs
  </div>
</div>

＆＃13;

Answer 4

如果您使用flex并制作h2和文本容器sibbling，margin应最终显示它：

body> div,
body > div > div {
  display:flex;
}
body> div {
  justify-content:center;
}
body > div > div {
  padding:0 1em;
  flex-flow:column;
}
body > div > div >  h2 {
  margin:0;
  text-align:center
}
body > div > div > div {
  margin:auto;
}

<div>
  <div>
    <h2>L2</h2>
    <div>gdgsdgsgsgsgs<br>gsgsgsgsdgsg<br>gsdgdsgdsgdsgd</div>
  </div>
  <div>
    <h2>R1</h2>
    <div>gdgsdgsgsgsgs<br>gsgsgsgsdgsg</div>
  </div>
  <div>
    <h2>W1</h2>
    <div>
      gdgsdgsgsgsgs</div>
  </div>
</div>

我的简约示例下的代码：

body> div,
body > div > div {
  display:flex;
}
body> div {
  justify-content:center;
  text-align:center
}
body > div > div {
  padding: 1em 0.125em;
  flex-flow:column;
}
body > div > div >  h2 {
  margin:0 0 0.75em;
}
body > div > div > div {
  margin:auto;
}
h2 {
  background:lightblue
}
h1 {
  font-size:1rem;
  color:tomato;
  margin:0;
  text-align:center;

<h1>minimalistic flex layout version </h1>
<div>
  <div>
    <h2>L2</h2>
    <div>gdgsdgsgsgsgs
      <br>gsgsgsgsdgsg
      <br>gsdgdsgdsgdsgd</div>
  </div>
  <div>
    <h2>R1</h2>
    <div>gdgsdgsgsgsgs
      <br>gsgsgsgsdgsg</div>
  </div>
  <div>
    <h2>W1</h2>
    <div>
      gdgsdgsgsgsgs</div>
  </div>
</div>
<hr/>
<h1>below your code </h1>
<section>
  <div style="width: 10000em; margin-left: -5000em; position: relative; left: 50%; text-align: center;">
    <div style="display:inline-block;vertical-align:middle">
      <div style="float:left:topleft;top:0">
        <h2>L2</h2>
      </div>
      gdgsdgsgsgsgs
      <br>gsgsgsgsdgsg
      <br>gsdgdsgdsgdsgd
    </div>

    <div style="display:inline-block;vertical-align:middle">
      <div style="float:left:top:0">
        <h2>R1</h2>
      </div>
      gdgsdgsgsgsgs
      <br>gsgsgsgsdgsg
    </div>

    <div style="display:inline-block;vertical-align:middle">
      <div style="float:left:top:0">
        <h2>W1</h2>
      </div>
      gdgsdgsgsgsgs
    </div>
  </div>
</section>

在几个div中垂直对齐h2标签

4 个答案: