当显示多个文本行时，如何从 inline-block 样式对齐 div 元素？答案

【问题标题】：How I align div's elements from a inline-block style when more than one text line are displayed?当显示多个文本行时，如何从 inline-block 样式对齐 div 元素？
【发布时间】：2016-11-03 08:17:11
【问题描述】：

我将这些元素显示在内联块、特定宽度等上。

预览：https://s13.postimg.org/hk700r45z/solvthis.png

但是，当显示多于一行时，它们会变得不清晰。

.shop_container,
.list_container {
  display: block;
}
.list_container {
  max-width: 1170px
}
.element_container,
list_container,
element {
  box-sizing: border-box;
}
.element_container {
  display: inline;
  font-size: 13pt;
  line-height: 1.5em;
  ...
}
.element {
  width: 40%;
  margin: 25px 2.5%;
  height: 100px;
  border: 1px solid {
    colour
  }
  ;
  padding-top:38px;
  line-height:17px;
  font-size:14px;
  display:inline-block;
  position:relative;
}
.element > span {
  font-size: 14px;
}

<div class="shop_container">
  <div class="list_container">

    <!-- Element 1 -->

    <div class="element_container">
      <a href="#" class="element">
        <span>Element1</span>
      </a>
    </div>

    <!-- Element 2 -->

    <div class="element_container">
      <a href="#" class="element">
        <span>Element2</span>
      </a>
    </div>

    <!-- Element 3 -->

    <div class="element_container">
      <a href="#" class="element">
        <span>Element3</span>
      </a>
    </div>

    <!-- Long list elements -->
  </div>
</div>

你知道问题出在哪里吗？我认为这是在添加到元素的固定 padding-top 中，但我不知道如何修复它。

【问题讨论】：

这个问题与PHP有关吗
你想让它们堆叠在一起吗？
你到底想要什么也不清楚？一行中的所有 div 或所有 div 需要垂直对齐？
width =100%; 而不是 width=40%;
您发布的代码运行良好。因此，您尚未发布的代码肯定会受到一些干扰。 jsfiddle.net/f309b6h9

标签： html css element inline

【解决方案1】：

你可以这样做：-

.shop_container, .list_container { display: block; }
.list_container { max-width: 1170px }
.element_container, list_container, element {  box-sizing: border-box; }
.element {
   width: 40%;
   margin: 25px 2.5%;
   height: 100px;
   border: 1px solid {colour};
   padding-top: 38px;
   line-height: 17px;
   font-size: 14px;
   display: inline-block;
   position: relative;
   word-break:break-all;

}
.element_container {
  display: inline;
  float: left;
  font-size: 13pt;
  line-height: 1.5em;
  width: 50%;
}
.element > span { font-size: 14px; }

<div class="shop_container">
  <div class="list_container">

    <!-- Element 1 -->

    <div class="element_container">
      <a href="#" class="element">
        <span>Element1</span>
      </a>
    </div>

    <!-- Element 2 -->

    <div class="element_container">
      <a href="#" class="element">
        <span>Element2</span>
      </a>
    </div>

    <!-- Element 3 -->

    <div class="element_container">
      <a href="#" class="element">
        <span>Element3
         hello again
         we meet here
         you have a problem
         i solved it
         thanks
        </span>
      </a>
    </div>


    <div class="element_container">
      <a href="#" class="element">
        <span>Element4</span>
      </a>
    </div>

    <!-- Long list elements -->
  </div>
</div>

更好一点：-

.shop_container, .list_container { display: block; }
.list_container { max-width: 1170px }
.element_container, list_container, element {  box-sizing: border-box; }
.element {
   width: 40%;
   margin: 25px 2.5%;
   height: 100px;
   border: 1px solid {colour};
   padding-top: 38px;
   line-height: 17px;
   font-size: 14px;
   display: inline-block;
   position: relative;
   word-break:break-all;

}
.element_container {
  display: inline;
  float: left;
  font-size: 13pt;
  line-height: 1.5em;
  width: 50%;
}
.element > span {
  float: left;
  font-size: 14px;
  margin-top: 10px;
  width: 100%;
}

<div class="shop_container">
  <div class="list_container">

    <!-- Element 1 -->

    <div class="element_container">
      <a href="#" class="element">
        <span>Element1</span>
      </a>
    </div>

    <!-- Element 2 -->

    <div class="element_container">
      <a href="#" class="element">
        <span>Element2</span>
      </a>
    </div>

    <!-- Element 3 -->

    <div class="element_container">
      <a href="#" class="element">
        <span>Element3</span>
         <span>hello again
         we meet here
         you have a problem
         i solved it
         thanks
        </span>
      </a>
    </div>


    <div class="element_container">
      <a href="#" class="element">
        <span>Element4</span>
      </a>
    </div>

    <!-- Long list elements -->
  </div>
</div>

【讨论】：