Как получить третий ящик на go под первым ящиком, а не посередине?

Question

Изображение коробок: Ящики сложены

У меня вопрос. Как я могу получить эту третью коробку в go под первой рамкой, а не в центре, но мне также нужно, чтобы все было в центре страницы.

Answer 1

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

.test {
  box-sizing: border-box;
  position: absolute;
  left: 50%;
  margin-left: -200px;
}

ul {
    position: relative;
}

.test li {
  display: inline-block;
border: 1px solid black;
font-size: 20px;
list-style-type: none;
width: 150px;
height: 150px;
line-height: 30px;
padding-left: 1px;
padding-right: 1px;
margin: 15px;
text-align: center;
border-radius: 5%;
background-color: rgb(255, 255, 255, 0.9);
}

li:nth-child(3) {
  display: block;
  left: 100px;
  bottom: 200px;
}

 <div class="test">
   <ul>
      <li>test1</li>
      <li>test2</li>
      <li>test3</li>
  </ul>
  </div>

Answer 2

Вы можете прибегнуть к flex или изменить свойство display, поэтому в идеале вы должны иметь код, подобный приведенному ниже

.test li {
       border: 1px solid black;
       /*display: inline-block; change this to block*/
       display: block;
       float: left;
       font-size: 20px;
       list-style-type: none;
       width: 150px;
       height: 150px;
       line-height: 30px;
       padding-left: 1px;
       padding-right: 1px;
       margin: 15px 25px;
       text-align: center;
       border-radius: 5%;
       background-color: rgb(255, 255, 255, 0.9);
    }