Question

我的div中有3个div。当我将它们向左浮动时，它们并排排列。我想使用CSS中的nth-child将它们放置在距顶部500像素的位置，但是然后将它们放置在彼此的顶部。如何解决这个问题？

.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浮动向左的问题？

1 个答案: