2016-12-20 2 views
0

Мне трудно удалить пробелы между элементами html.
Я попробовал display: inline-block, float: right, ul view и много других способов.HTML и CSS: Не удается удалить интервал между элементами

Как видно из фрагмента ниже, между изображениями пробегает пробел.

#brandpage-banners .brandpage-banner-container { 
 
    float: right; 
 
    width: 50%; 
 
}
<div id="brandpage-banners"> 
 

 
    <div class="brandpage-banner-container"> 
 
     <img src="http://cdn.shoesonline.co.il/uploads/2016/12/columbia_brand_page_medium_banner_2.png"> 
 
    </div> 
 

 
    <div class="brandpage-banner-container"> 
 
     <img src="http://cdn.shoesonline.co.il/uploads/2016/12/columbia_brand_page_medium_banner_1.png"> 
 
    </div> 
 

 
</div>

Итак, как я могу удалить это пространство?

EDIT: Граница на самом деле является частью изображения. Извините, ребята, и спасибо, глупо! : |

ПОЖАЛУЙСТА, УДАЛЯЙТЕ ЭТОТ ПОЧТУ!

+0

Откройте консоль разработки браузеров и выяснить, что на самом деле вызывает этот пробел. – arkascha

+0

Попробуйте проверить свой бренд-бренд CSS-banner-container, вы установили его на 50% как ширину, попробуйте снизить его до 30% или просто удалите границу ширины. – SKLTFZ

+0

'width' ваших' divs' является проблемой здесь. –

ответ

9

Я уверен, что белая граница является частью самого изображения.

+0

спасибо за snaphat OP @HikeNalbandyan – bitten

0

Попробуйте это:

#brandpage-banners .brandpage-banner-container { 
    float: left; 
    width: 50%; 
} 

#brandpage-banners .brandpage-banner-container img{ 
    display: block; 
    max-width: 100%; 
    margin: auto; 
} 
0
#brandpage-banners .brandpage-banner-container { 
    float: right; 
    width: auto; 
} 

Если вы сделаете ширина авто он будет работать.

1

Попробуйте это ...

А также граница изображения есть пустое пространство

#brandpage-banners .brandpage-banner-container { 
 
    float: right; 
 
    width: 50%; 
 
} 
 
#brandpage-banners .brandpage-banner-container img { 
 
    width: 100%; 
 
} 
 
#brandpage-banners { 
 
    width: 100%; 
 
}
<div id="brandpage-banners"> 
 

 
    <div class="brandpage-banner-container"> 
 
    <img src="http://cdn.shoesonline.co.il/uploads/2016/12/columbia_brand_page_medium_banner_2.png"> 
 
    </div> 
 

 
    <div class="brandpage-banner-container"> 
 
    <img src="http://cdn.shoesonline.co.il/uploads/2016/12/columbia_brand_page_medium_banner_1.png"> 
 
    </div> 
 

 
</div>

-1

Я попытался это изображение границы не элементы. Я просто сохраняю и открываю рамку Photoshop со всех сторон.

1

#brandpage-banners .brandpage-banner-container { 
 
    float: right;    
 
    } 
 

 
.brandpage-banner-container,.brandpage-banner-container img{ 
 
    position : relative;   
 
    }
<div id="brandpage-banners"> 
 

 
    <div class="brandpage-banner-container"> 
 
     <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRirSq4E2oGo5aoyRERdKnUYMkk3hxiApQ86NCLRB_i0hiuiDQF"> 
 
    </div> 
 

 
    <div class="brandpage-banner-container"> 
 
     <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRirSq4E2oGo5aoyRERdKnUYMkk3hxiApQ86NCLRB_i0hiuiDQF"> 
 
    </div> 
 

 
</div>

Смежные вопросы