<div>与孩子<a> (anchor tag)

Question

A Page has 3 div

    div
    {
     display: inline-block;
     margin: 10px;
     width: 200px;
     height: 200px;
     background-color: #333;
     color: white;
     text-align: center;
    }

    <div></div> <!--Div 1-->
    <div></div> <!--Div 2-->
    <div></div> <!--Div 3-->

的意外行为

which produce folowing result.

但是当我在任何div中嵌套一个锚标记时。

<div></div> <!--Div 1-->
<div></div> <!--Div 2-->
<div>       <!--Div 3 with anchor tag-->
    <a href="#">Anchor Tag</a>
</div>

该div被推倒但为什么。

Answer 1

使用 vertical-align：top; 。它会对你有所帮助。 Jsfiddle

div {
 display: inline-block;
 margin: 10px;
 width: 200px;
 height: 200px;
 background-color: #333;
 color: white;
 text-align: center;
 vertical-align: top;
}

Answer 2

您可以使用 float：left;

＆＃13;

＆＃13;

div
{
 margin: 10px;
 width: 200px;
 height: 200px;
 background-color: #333;
 color: white;
 text-align: center;
 float:left;
}

＆＃13;

<div></div> <!--Div 1-->
<div></div> <!--Div 2-->
<div>       <!--Div 3 with anchor tag-->
    <a href="#">Anchor Tag</a>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

我创建了一个父div并为其分配了父类。三个div有儿童班。我做了父inline-flex和child inline-block。

C:\Users\user name\Documents\Jmeter\apache-jmeter-3.0\bin>jmeter -n -t "C:\Users\user name\Documents\Jmeter ABC\Jmeter ABC_test\recorded script\recorded_v2.jmx"

 .child
     {
      display: inline-block;
      margin: 10px;
      width: 100px;
      height: 200px;
      background-color: #333;
      color: white;
      text-align: center;
      }

     .parent{
      display:inline-flex;
      }

Answer 4

使用vertical-align：___;当你使用display：inline-block;。它是inline-block的关联属性; Bu默认它是与neibour的底部对齐。

div
{
 display: inline-block;
 margin: 10px;
 width: 200px;
 height: 200px;
 background-color: #333;
 color: white;
 text-align: center;
 vertical-align:top;
}