Разметка элементов html

477

24 ноября 2016, 10:14

Не получается разместить элементы таким образом. Как мне это сделать?

Пока получилось только добавить фон с красным градиентом и указатели влево/вправо HTML

<div class="slider">
    <div class="switch">
        <img src="img/left.png" >
        <img src="img/right.png">
    </div>
</div>

CSS

.slider{
height: 360px;
background: url(../img/slider.jpg); 
}
.switch{
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
width: 928px;
margin: 0 auto;
height: 100%;
}

Answer 1

Примерно вот так, если хотите сделать слайдер, можно использывать готовые решения типа owl-carousel.

.slider 
    {widht: 100%; max-width: 1200px;} 
    .switch 
    {width: 10%;} 
    .sw__left 
    {float: left;} 
    .sw__right 
    {float: right;} 
    .slide 
    {width: 80%; float: left; text-align: center;}

<script src="https://use.fontawesome.com/af54dc21f9.js"></script> 
<div class="slider"> 
        <div class="switch sw__left"> 
            <i class="fa fa-chevron-left fa-2x" aria-hidden="true"></i> 
        </div> 
         <div class="slide"> 
            <img class="slide__img" src="http://svitoch.in.ua/upload/000/u8/002/2839cb71.jpg"> 
        </div> 
        <div class="switch sw__right"> 
           <i class="fa fa-chevron-right fa-2x" aria-hidden="true"></i> 
        </div> 
    </div>