yoko yoko - 29 days ago 5
CSS Question

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

I got these elements display on a inline-block, specific width, etc.


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


But, when more than one line is displayed, they get 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>





Would you know where is the problem? I think that is in the fixed padding-top added to element, but I don't know how to fix it.

Answer

You can do it like below:-

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

A bit more good:-

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

Comments