CSS 向左浮动如何解决这个问题？

Question

我在 div 中有 3 个 div。当我将它们向左浮动时，它们并排排列。我想使用 CSS 中的 nth-child 将它们定位在距顶部 500px 的位置，但随后它们将自己定位在彼此之上。如何解决这个问题？

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

Answer 1

我想我明白你在说什么。您希望它们并排放置，每个都具有相同的 top 值。浮动将自动并排放置它们（如果有空间），但如果你想用绝对定位来做到这一点，你需要同时设置每个元素的 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>

CSS 向左浮动如何解决这个问题？

How can I solve this problem with CSS float left?

css-position

css-float