Задать вопрос

DmiDrok

Ответы пользователя по тегу HTML

  • Как сделать кнопки на одном уровне?

    @DmiDrok 
    <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>

  <div class="wrap">
    <div class="item">
      <p>1</p>
      <div class="content">
         <p>title</p>
        <div class="btn-block">
         <button>btn</button>
       </div>
      </div>
    </div>
     <div class="item">
        <p>2</p>
       <div class="content">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque quis aliquam hic corrupti eius sunt non quasi repellendus ducimus doloremque magni amet, molestiae error, porro facilis, similique modi eos! Cupiditate!</p>
       </div>
       <div class="btn-block">
         <button>btn</button>
       </div>
    </div>
  </div>
</body>
</html>


    .wrap {
  display: flex;
}

.item {
  width: 50%;
  outline: 1px solid red;
  display: flex;
  flex-direction: column;
}

.content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.item .btn-block {
  margin-top: auto;
}
    Ответ написан
    Комментировать
    Комментировать

  • Как сделать простой автоматический слайдер (без кнопок)?

    @DmiDrok
    Селекторы надо закрывать:

    .slider {
    height: 300px;
    width: 230px;
    overflow: hidden;
    }

    .slides {
    animation: animatika 50s infinite ease;
    width: 690px;
    height: 300px;
    clear: both;
    position: relative;
    }

    @keyframes animatika{
    0% {
    left: 0px;
    }
    10% {
    left: -300px;
    }
    20% {
    left: -600px;
    }
    30% {
    left: -900px;
    }
    40% {
    left: -1200px;
    }
    50% {
    left: -1200px;
    }
    60% {
    left: -1200px;
    }
    70% {
    left: -900px;
    }
    80% {
    left: -600px;
    }
    90% {
    left: -300px;
    }
    100% {
    left: 0;
    }
    }
    }
    Ответ написан
    1 комментарий
    1 комментарий