seo Question posted in
Some basic information to get you started with this can be found here.

Place items on one line regardless of content – SEO

I have theese 3 divs with some content in them and i have to put links (marked with red) on one line regardless of how long the text will be. They always have to stay on one same line.

flexbox usage is mandatory
flex-end property doesn’t seem to help

here’s how it should look like

.tl {
  m-w: 1200px;
  display: flex;
  color: #000;
  margin-top: 70px;
  justify-content: space-evenly;
  padding-left: 18px;
  /* padding-top: 30px; */
}

.tile {
  text-align: left;
  padding-left: 40px;
  margin-top: 0px;
  padding-top: 0px;
  width: 100%;
  padding-bottom: 20px;
  display: flex;
  flex-direction: column;
}

.plus {
  align-self: flex-end;
}
<div class="tiles">
  <div class="container tl">
    <div class="tile chart">
      <h3>SEO Optimized</h3>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galand scrambled it to make</p>
      <a href="#" class="plus">+</a>
    </div>
    <div class="tile pad">
      <h3>SEO Optimized</h3>
      <p>Lorem Ipsum is simply dummy text of the printing adustry's standard dummy text ever since the 1500s, xt ext ever since the 1500s,ver since the 1500s,when an unknown printer took a galley of type and scrambled it to makemy text ever since the 1500</p>
    </div>
    <div class="tile cloud">
      <h3>SEO Optimized</h3>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make</p>
      <a href="#" class="plus"></a>
    </div>
  </div>
Tags:

2

Answers


  1. 0

    You can’t align elements that do not share a parent but what you can do is push each “plus” to the bottom of each tile.

    Just apply margin-top: auto; to the “plus” elements.

    Since all the tiles are the same height, the “plus” items will line up.

    .tl {
  width: 80%;
  margin: auto;
  display: flex;
  color: #000;
  margin-top: 70px;
  justify-content: space-evenly;
  padding-left: 18px;
  /* padding-top: 30px; */
}

.tile {
  text-align: left;
  padding: 5px;
  margin-top: 0px;
  padding-top: 0px;
  width: 100%;
  padding-bottom: 20px;
  display: flex;
  flex-direction: column;
  border: 1px solid green;
}

.plus {
  align-self: flex-end;
  padding: 1em;
  background: red;
  margin-top: auto;
}
    <div class="tiles">
  <div class="container tl">
    <div class="tile chart">
      <h3>SEO Optimized</h3>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galand scrambled it to make</p>
      <a href="#" class="plus">+</a>
    </div>
    <div class="tile pad">
      <h3>SEO Optimized</h3>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa animi ea commodi autem aspernatur dolores aliquam vel illo, voluptatum magni aperiam quibusdam blanditiis cum laboriosam earum, exercitationem rerum. Error, deleniti sequi quod repellendus
        ducimus excepturi inventore aliquam impedit doloribus reprehenderit beatae obcaecati voluptates voluptas, ut fuga dignissimos culpa? Explicabo aperiam expedita nulla unde sed asperiores nostrum iure reiciendis qui aliquam id doloribus vel officiis
        modi iusto mollitia, eum at, libero et dolore facilis suscipit dicta aspernatur corporis?</p><a href="#" class="plus">+</a>
    </div>
    <div class="tile cloud">
      <h3>SEO Optimized</h3>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make</p>
      <a href="#" class="plus">+</a></div>
  </div>
    Login or Signup to reply.
  2. 0

    Adding flex: 1 to the p tag for description should do the trick. This makes the description take all the available space inside the container pushing the plus symbol all the way to the bottm.

    .tl{
     m-w:1200px;
     display: flex;
     color: #000;
     margin-top: 70px;
     justify-content: space-evenly;
     padding-left: 18px;
   /* padding-top: 30px; */
}
.tile{
    text-align: left;
    padding-left: 40px;
    margin-top: 0px;
    padding-top: 0px;
    width: 100%;
    padding-bottom: 20px;
    display: flex;
    flex-direction: column;
}
.tile p {
    flex: 1
 }
.plus{
    align-self: flex-end;
}
    <div class="tiles">
<div class="container tl">
  <div class="tile chart">
    <h3>SEO Optimized</h3>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galand scrambled it to make</p>
    <a href="#" class="plus">+</a>
  </div>
  <div class="tile chart">
    <h3>SEO Optimized</h3>
    <p>Lorem Ipsum is simply duesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galand scrambled it to make</p>
    <a href="#" class="plus">+</a>
  </div>
  <div class="tile chart">
    <h3>SEO Optimized</h3>
    <p>Lorem Ipsum is simply dummy tee 1500s, when an unknown printer took a galand scrambled it to make</p>
    <a href="#" class="plus">+</a>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search