Смещение блоков

298
02 октября 2017, 00:58

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

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

HTML

<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>

CSS

/*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;
}
Answer 1

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

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

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

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

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

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

READ ALSO
Разрешения экранов при верстке

Разрешения экранов при верстке

Подскажите почему пишет айфон 5 разрешение 320? хотя у него 640 и в айфон 6+ 414 хотя больше чем в раза больше?

315
Атрибут `resource` для тега `td`

Атрибут `resource` для тега `td`

Встретил таблицу, в которой одна из ячеек имеет аттрибут resource:

251
Замена src через консоль на сайте [требует правки]

Замена src через консоль на сайте [требует правки]

Помогите нужна замена, что бы когда я в водил в консоль на сайте (не на своем) она заменяла картинку ссылку srcОчень нужно

303