Выравнивание элемента внутри блока

175

26 августа 2018, 05:50

На странице используется карусель slick-jquery.

$('.single-item').slick({ 
  autoplay: true, 
  dots: true, 
  infinite: true, 
  adaptiveHeight: true, 
  arrows: false 
});

.review-box { 
  background: #c5e0dc; 
  padding: 30px 0px; 
} 
 
.review-img { 
  float: left; 
  margin-right: 28px; 
} 
 
.review-text { 
  float: left; 
  margin-top: 25px; 
  font-size: 14px; 
} 
 
.review-title { 
  font-weight: 600; 
} 
 
.review-text p { 
  margin: 5px; 
} 
 
.container { 
  margin-right: auto; 
  margin-left: auto; 
  padding-left: 15px; 
  padding-right: 15px; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<link href="http://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" rel="stylesheet"/> 
<script src="http://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script> 
<div class="review-box single-item"> 
  <div class="container"> 
    <div class="review-img"> 
      <img class="spec-img" src="http://dljaledi.com.ua/uploads/posts/2013-04/1366490605_b59532acecdeb64d755912f96d56ff73.jpg"> 
    </div> 
    <div class="review-text"> 
      <div class="review-title"> 
        Фадеев А.И. 1 
      </div> 
      <p>цитата</p> 
    </div> 
  </div> 
  <div class="container"> 
    <div class="review-img"> 
      <img class="spec-img" src="http://dljaledi.com.ua/uploads/posts/2013-04/1366490605_b59532acecdeb64d755912f96d56ff73.jpg"> 
    </div> 
    <div class="review-text"> 
      <div class="review-title"> 
        Фадеев А.И. 2 
      </div> 
      <p>цитата</p> 
    </div> 
  </div> 
  <div class="container"> 
    <div class="review-img"> 
      <img class="spec-img" src="http://dljaledi.com.ua/uploads/posts/2013-04/1366490605_b59532acecdeb64d755912f96d56ff73.jpg"> 
    </div> 
    <div class="review-text"> 
      <div class="review-title"> 
        Фадеев А.И. 3 
      </div> 
      <p>цитата</p> 
    </div> 
  </div> 
</div>

В представленной разметке контейнер с контентом в карусели имеет класс .container, что в свою очередь говорит об отступах по краям страницы по 15 пикселей. Но при загрузке страницы js добавляет свои дополнительные классы, среди которых есть класс .slick-slide, в котором прописано float: left;. Таким образом содержимое контейнера прилипает к левому краю и визуально портит страницу. Собственно можно ли сделать чтобы флоат срабатывал внутри контейнера(не заменяя его свойств)? ps заметил такую штуку, что если убрать это свойство. То при показе одного слайда все содержимое выглядит отлично, "как надо", но при добавлении >1 слайда вся разметка ломается и выводится очень странно. pss со стилями строго на "вы" общаюсь.

Answer 1

Я советую помещать не каждый слайд в контейнер, а весь слайдер. Вот пример(смотреть на весь экран):

$('.single-item').slick({ 
  dots: true, 
  infinite: true, 
  adaptiveHeight: true, 
  arrows: false 
});

*{ 
  box-sizing:border-box; 
} 
body{ 
  margin:0; 
} 
.review-box { 
  background: #c5e0dc; 
  padding: 30px 0px; 
} 
 
.review-img { 
  float: left; 
  margin-right: 28px; 
} 
 
.review-text { 
  float: left; 
  margin-top: 25px; 
  font-size: 14px; 
} 
 
.review-title { 
  font-weight: 600; 
} 
 
.review-text p { 
  margin: 5px; 
} 
 
.container { 
  max-width:1200px; 
  margin-right: auto; 
  margin-left: auto; 
  padding-left: 15px; 
  padding-right: 15px; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<link href="http://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" rel="stylesheet"/> 
<script src="http://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script> 
<div class="review-box"> 
  <div class="container"> 
    <div class="single-item">   
      <div class="review"> 
        <div class="review-img"> 
          <img class="spec-img" src="http://dljaledi.com.ua/uploads/posts/2013-04/1366490605_b59532acecdeb64d755912f96d56ff73.jpg"> 
        </div> 
        <div class="review-text"> 
          <div class="review-title"> 
            Фадеев А.И. 3 
          </div> 
          <p>цитата</p> 
        </div> 
      </div> 
      <div class="review"> 
        <div class="review-img"> 
          <img class="spec-img" src="http://dljaledi.com.ua/uploads/posts/2013-04/1366490605_b59532acecdeb64d755912f96d56ff73.jpg"> 
        </div> 
        <div class="review-text"> 
          <div class="review-title"> 
            Фадеев А.И. 3 
          </div> 
          <p>цитата</p> 
        </div> 
      </div> 
      <div class="review"> 
        <div class="review-img"> 
          <img class="spec-img" src="http://dljaledi.com.ua/uploads/posts/2013-04/1366490605_b59532acecdeb64d755912f96d56ff73.jpg"> 
        </div> 
        <div class="review-text"> 
          <div class="review-title"> 
            Фадеев А.И. 3 
          </div> 
          <p>цитата</p> 
        </div> 
      </div> 
    </div> 
  </div> 
</div>