0

Нужна помощь, проблема получается в чём, добавил болок с картинкой на страницу , а все товары слетели в право.

Как сместились товары

Как их вернуть обратно, но при этом что бы блок с права остался на своём месте?

Код:

/*Feature Glass*/

.reclam{
    float: right;

}

/*Товары*/

.midl-col{
    width: 757px;
    margin-left: 191px;
    margin-right: 452px;
    float: left;
}

.products-list>li{
    display: inline-block;
    margin: 0 28px 27px 0;
    min-height: 319px;
    float: left;
    border: 1px solid #eeeeee;
}

.products-list>li:hover,
.products-list>li.active
{
    border: 1px solid #64608f;
    cursor: pointer;
    background: url(img/Korzinka.png) no-repeat 160px 247px;
}



.products-list>li:nth-child(3n){
margin-right: 0;
}

.products{
    padding-left: 13px;
}

.old-price{
    font-size: 11pt;
    color: #464148;
    text-decoration: line-through;
}

.price{
    position: absolute;
    color: #7db122;
    font-size: 15pt;
}
/*New icon*/
.special{
    position: absolute;
    top: 10px;
    text-indent: -9999px;
    z-index: 1;
}

.special .bue{
         background: url(img/NEW%20icon.png) no-repeat 0 0; 
}

.new {
  position: absolute;
  width: 90px;
  height: 85px;
  left: 610px;
    top: 749px;
}
<div class="reclam">
 <h2>Featured</h2>
 <h2>Glass</h2>
 <img src="img/Featured%20Glass.png" alt="">
</div>       

<div class="midl-col">
    <ul class="products-list">
        <li class="active">
            <img src="img/prod1.png" alt="">
            <div class="products">
                <p>Lorem Ipsum is simply.</p>
                <p></p>
                <div class="price-block">
                <p class="price">$388.00</p>
                </div>
            </div>
        </li>
        <li>
           <img src="img/new.png" alt="" class="new">
            <img src="img/prod2.png" alt="">
            <div class="products">
                <p>Lorem Ipsum is simply.</p>
                <p></p>
                <div class="price-block">
                    <p class="price">$90.00</p>
                </div>
            </div>
            <ul class="special">
            <li class="bue">yjasfasfsafasf</li>
            </ul>
        </li>
        <li>
            <img src="img/prod3.png" alt="">
            <div class="products">
                <p>Lorem Ipsum is simply.</p>
                <p></p>
                <div class="price-block">
                    <p class="old-price">$460</p>
                    <p class="price">$300.00</p>
                </div>
            </div>
        </li>
        <li>
            <img src="img/prod3.png" alt="">
            <div class="products">
                <p>Lorem Ipsum is simply.</p>
                <p></p>
                <div class="price-block">
                    <p class="price">$90.00</p>
                </div>
            </div>
        </li>
        <li>
            <img src="img/prod3.png" alt="">
            <div class="products">
                <p>Lorem Ipsum is simply.</p>
                <p></p>
                <div class="price-block">
                    <p class="price">$90.00</p>
                </div>
            </div>
        </li>
        <li>
            <img src="img/prod3.png" alt="">
            <div class="products">
                <p>Lorem Ipsum is simply.</p>
                <p></p>
                <div class="price-block">
                    <p class="price">$90.00</p>
                </div>
            </div>
        </li>
        <li>
            <img src="img/prod3.png" alt="">
            <div class="products">
                <p>Lorem Ipsum is simply.</p>
                <p></p>
                <div class="price-block">
                    <p class="price">$90.00</p>
                </div>
            </div>
        </li>
        <li>
            <img src="img/prod3.png" alt="">
            <div class="products">
                <p>Lorem Ipsum is simply.</p>
                <p></p>
                <div class="price-block">
                    <p class="price">$90.00</p>
                </div>
            </div>
        </li>
        <li>
            <img src="img/prod3.png" alt="">
            <div class="products">
                <p>Lorem Ipsum is simply.</p>
                <p></p>
                <div class="price-block">
                    <p class="price">$90.00</p>
                </div>
            </div>
        </li>
        <li>
            <img src="img/prod3.png" alt="">
            <div class="products">
                <p>Lorem Ipsum is simply.</p>
                <p></p>
                <div class="price-block">
                    <p class="price">$90.00</p>
                </div>
            </div>
        </li>
        <li>
            <img src="img/prod3.png" alt="">
            <div class="products">
                <p>Lorem Ipsum is simply.</p>
                <p></p>
                <div class="price-block">
                    <p class="price">$90.00</p>
                </div>
            </div>
        </li>
        <li>
            <img src="img/prod3.png" alt="">
            <div class="products">
                <p>Lorem Ipsum is simply.</p>
                <p></p>
                <div class="price-block">
                    <p class="price">$90.00</p>
                </div>
            </div>
        </li>
        <li>
            <img src="img/prod3.png" alt="">
            <div class="products">
                <p>Lorem Ipsum is simply.</p>
                <p></p>
                <div class="price-block">
                    <p class="price">$90.00</p>
                </div>
            </div>
        </li>
        <li>
            <img src="img/prod3.png" alt="">
            <div class="products">
                <p>Lorem Ipsum is simply.</p>
                <p></p>
                <div class="price-block">
                    <p class="price">$90.00</p>
                </div>
            </div>
        </li>
        <li>
            <img src="img/prod3.png" alt="">
            <div class="products">
                <p>Lorem Ipsum is simply.</p>
                <p></p>
                <div class="price-block">
                    <p class="price">$90.00</p>
                </div>
            </div>
        </li>
    </ul>
</div>
</div>

4
  • по предоставленной верстке непонятно что к чему относится
    – DogeDev
    29 сен 2017 в 17:58
  • @DogeDev Чего именно не хватает?
    – BraFik
    29 сен 2017 в 18:00
  • У Вас всего 4 тега в html. Не ясно к чему какой класс относится в стилях. Хотелось бы увидеть верстку максимально близкую к оригиналу.
    – DogeDev
    29 сен 2017 в 18:04
  • @DogeDev вроде бы изменил
    – BraFik
    29 сен 2017 в 18:10

1 ответ 1

1

... а все товары слетели в право.

Они вроде как не вправо слетели, а вниз ушли.

Вы занимаете блоком с очками всю свободную ширину на стандартных разрешениях мониторов. 757+191+452 это 1490 пикселей. Рекламному блоку туда просто не втиснуться.

.midl-col{
    width: 757px;
    margin-left: 191px;
    margin-right: 452px;
    float: left;
}

Попробуйте сделать так, например.

.midl-col{
    width: 757px;
    float: left;
}

2
  • Лучше чем было теперь они выровнялись как и были, НО теперь они прижаты к левому краю полностью
    – BraFik
    29 сен 2017 в 18:26
  • Ухххху я решил проблему таким вот образом .midl-col{ width: 757px; margin-left: 191px; float: left; }
    – BraFik
    29 сен 2017 в 18:31

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.