Как мне переместить 3 div, которые накладываются

Question

У меня есть 3 div с вложенными тегами привязки. Я пытаюсь расположить их так, чтобы они находились рядом друг с другом на равных расстояниях. Что бы я ни старался, они просто накладывались друг на друга.

Вот мой CSS код

        .links {
             width: 35%;
             text-align: center;
             border: solid 1px;
             background-color: #02b316;
             margin: 5px;
             position: absolute;
        }
        .absolute {
            text-decoration: none;  
            color: white;
            font-size: 11px;
        }
        .link-container {
            padding-left: 5px;
            padding-right: 5px;
        }
        h4 {
            font-size: 18px;
            margin: 10px;
        }
        p {
            font-size: 14px;
        }

Вот мой HTML

   <div class="links">
      <div class="link-container">
            <a class="absolute" href="#">
                <h4>Lorem Ipsum</h4> 
                    <hr>
                    <p>
                        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 a type specimen.
                    </p>
            </a>
     </div>
   </div>

    <div class="links">
      <div class="link-container">
            <a class="absolute" href="#">
                <h4>Lorem Ipsum</h4> 
                    <hr>
                    <p>
                        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 a type specimen.
                    </p>
            </a>
      </div>
    </div>

   <div class="links">
     <div class="link-container">
            <a class="absolute" href="#">
                <h4>Lorem Ipsum</h4> 
                    <hr>
                    <p>
                        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 a type specimen.
                    </p>
            </a>
      </div>
    </div>    

Answer 1

Вы хотите использовать flex-box, чтобы он отзывчивый. Вот пример. :)

.container {
  display: flex;
  flex-wrap: wrap;
}

.links {
  flex: 1;
  text-align: center;
  border: solid 1px;
  background-color: #02b316;
  margin: 5px;
}

.absolute {
  text-decoration: none;
  color: white;
  font-size: 11px;
}

.link-container {
  padding-left: 5px;
  padding-right: 5px;
}

h4 {
  font-size: 18px;
  margin: 10px;
}

p {
  font-size: 14px;
}

<div class="container">
  <div class="links">
    <div class="link-container">
      <a class="absolute" href="#">
        <h4>Lorem Ipsum</h4>
        <hr>
        <p>
          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 a type specimen.
        </p>
      </a>
    </div>
  </div>

  <div class="links">
    <div class="link-container">
      <a class="absolute" href="#">
        <h4>Lorem Ipsum</h4>
        <hr>
        <p>
          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 a type specimen.
        </p>
      </a>
    </div>
  </div>

  <div class="links">
    <div class="link-container">
      <a class="absolute" href="#">
        <h4>Lorem Ipsum</h4>
        <hr>
        <p>
          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 a type specimen.
        </p>
      </a>
    </div>
  </div>
</div>

Answer 2

Элемент div по умолчанию отображается как элемент блока, display: block в коде. Это должно быть изменено .
Заданное position: absolute заставляет все элементы появляться в одном месте .
Кроме того, блоки, включая добавленные поля и отступы не помещаются на всю ширину страницы. Это также нуждается в корректировке.
Измените ваши css .links и .link-container декларации:

.links {
  width: 30%;
  text-align: center;
  border: solid 1px;
  background-color: #02b316;
  margin: 1%;
  position: relative;
  display: inline-block;
}

.link-container {
  padding-left: 1%;
  padding-right: 1%;
}

Answer 3

Попробуйте это.

.container {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;

}

.links {
             width: 35%;
             text-align: center;
             border: solid 1px;
             background-color: #02b316;
             margin: 5px;
             
        }
        .absolute {
            text-decoration: none;  
            color: white;
            font-size: 11px;
        }
        .link-container {
            padding-left: 5px;
            padding-right: 5px;
        }
        h4 {
            font-size: 18px;
            margin: 10px;
        }
        p {
            font-size: 14px;
        }

<div class="container">

 <div class="links">
      <div class="link-container">
            <a class="absolute" href="#">
                <h4>Lorem Ipsum</h4> 
                    <hr>
                    <p>
                        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 a type specimen.
                    </p>
            </a>
     </div>
   </div>

    <div class="links">
      <div class="link-container">
            <a class="absolute" href="#">
                <h4>Lorem Ipsum</h4> 
                    <hr>
                    <p>
                        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 a type specimen.
                    </p>
            </a>
      </div>
    </div>

   <div class="links">
     <div class="link-container">
            <a class="absolute" href="#">
                <h4>Lorem Ipsum</h4> 
                    <hr>
                    <p>
                        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 a type specimen.
                    </p>
            </a>
      </div>
    </div>
</div>

Answer 4

<style>
.container {
padding: 10px
}
.content1 {
margin-left: 0px;
height: 90px;
width: 24%
background: #ddd;
}
.content2 {
background: #3ce223;
height: 90px;
width: 24%;
float: center; /*if that doesn't work than replace it with this: margin-left: 500px; */
}
.content3 {
background: #3dn210o;
height: 90px;
width: 24%;
float: right; /*if that doesn't work than replace it with this: margin-left: 1000px; or at least until it is right of the screen */
}
</style>
<div class="container">
<div class="content1">
</div>
<div class="content2">
</div>
<div class="content3">
</div>
</div>

Если ничего из этого не работает, пожалуйста, прокомментируйте, и я решу проблему