当显示多个文本行时，我如何从行内块样式中对齐 div 的元素？

Question

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

Preview: https://s13.postimg.org/hk700r45z/solvthis.png

但是，当显示多于一行时，它们会显示为 disalineadas。

.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 中，但我不知道如何修复它。

Answer 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>

当显示多个文本行时，我如何从行内块样式中对齐 div 的元素？

How I align div's elements from a inline-block style when more than one text line are displayed?

html

css

element

inline