@Xia1

Как разместить блоки?

Есть задача
Не использовать flexbox
Не использовать position
Разместить блоки ,используя float
Проблемы со второй и третьей строкой , т к при float right они идут как ,5 4 ,3 ,2
В html блоки идут по порядку 1 2 3 4 5
И изменить значение в них нельзя )
65517a8aa7d5b314354262.jpeg
  • Вопрос задан
  • 76 просмотров
Решения вопроса 1
@MrColdCoffee
web
HTML:
<div>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>      
    </ul>
</div>


Css для второй строки:

div{
    width:100%;  
}
ul{  
    padding:0;
    margin:0;
    width:100%;
    text-align:right;
}
li{
    width:50px;
    height:50px;    
    margin:20px 5px;
    padding:5px;
    text-align:center;   
    list-style:none;  
    display:inline-block;
    font-size:25px;  
    line-height:50px;
    font-weight:500;
    background:#fc9090;
    color:#FFF;
  font-family:sans-serif;
}
li:nth-child(1){
  width:100px;
  height:100px;
  float:left;
  line-height:100px;
  font-size:50px;
}


css для третьей строки:

div{
    width:100%;  
}
ul{  
    padding:0;
    margin:0;
    width:100%;
    text-align:right;
}
li{
    width:100px;
    height:100px;    
    margin:20px 5px;
    padding:5px;
    text-align:center;   
    list-style:none;  
    display:inline-block;
    line-height:100px;
    font-size:50px;
    font-weight:500;
    background:#fc9090;
    color:#FFF;
    font-family:sans-serif;
}
li:nth-child(1),li:nth-child(2){
  float:left;
}
li:nth-child(5){
display:none;
}
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы