Как я могу решить эту проблему с помощью CSS float left? - PullRequest
Новая
       25

Как я могу решить эту проблему с помощью CSS float left?

0 голосов
/ 17 декабря 2018

У меня есть 3 div внутри div.Когда я плаваю влево, они выстраиваются в ряд.Я хочу расположить их, например, на 500 пикселей сверху, используя nth-child в CSS, но затем они располагаются друг над другом.Как можно решить эту проблему? 

.wrapper{
    content:"";
    display:block;
    clear:both;   
}
.sevice p{
    margin: 10px 0;
    text-align: center;
}
.service{
    float: left;
    background-color: rgba(255,255,255,0.7);
    width: 26%;
    margin: 1%;
    padding: 1%;
    height: 200px;
    position: absolute;
}
.service:nth-child(1){
    top: 500px;
    
}
.service:nth-child(2){
    top: 500px;
}
.service:nth-child(3){
    top: 500px;
}
                 <div class="wrapper">                 
                    <div class="service">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco 
                        </p>
                    </div>    
                    <div class="service">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco 
                        </p>
                    </div>    
                    <div class="service">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco 
                        </p>
                    </div> 
                </div>

1 Ответ

0 голосов
/ 17 декабря 2018

Мне кажется, я понимаю, что вы говорите.Вы хотели бы, чтобы они располагались рядом, каждый с одинаковым значением top.Floating автоматически расположит их рядом (если есть место), но если вы хотите сделать это с абсолютным позиционированием, вам нужно установить значения top и left для каждого элемента.Если вы не установите значение left, все ваши элементы будут установлены влево.Я пересмотрел приведенный ниже фрагмент, чтобы привести пример (и очистить пару вещей).

Общее правило состоит в том, что, когда вы используете абсолютное позиционирование, вы должны указать координаты x, y одного изуглы элемента относительно аналогичного угла его контейнера.Для этого вы можете использовать либо top, либо bottom, либо right или left.Так, top и left разместят верхний левый угол вашего элемента относительно верхнего левого угла контейнера, bottom и left сделают то же самое с двумя нижними левыми углами, и так далее.

Если вы не укажете, все значения будут равны нулю, и ваш элемент будет в левом верхнем углу вашего контейнера.В вашем случае вы не указали left или right, поэтому все три элемента были расположены в left: 0.Другими словами, все они были друг на друге, как вы заметили. 

/* Don't need any of this
.wrapper{
    content:"";
    display:block;
    clear:both;  
}
*/

.service p { /* You had ".sevice p," which is why you didn't get centering */
  /* margin: 10px 0; 
     Don't really need margin with absolute positioning, just change top/left 
     values to make adjustments to position */
  text-align: center;
}

.service {
  /*   float: left; don't need this any more */
  top: 500px; /* put this here if it's the same for all of them */
  background-color: rgba(255, 255, 255, 0.7);
  width: 26%;
  margin: 1%;
  padding: 1%;
  height: 200px;
  position: absolute;
}

.service:nth-child(1) {
  left: 0px;
  /* here */
}

.service:nth-child(2) {
  left: 27%;
  /* here */
}

.service:nth-child(3) {
  left: 54%;
  /* and here */
}
<div class="wrapper">
  <div class="service">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
    </p>
  </div>
  <div class="service">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
    </p>
  </div>
  <div class="service">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
    </p>
  </div>
</div>
...