У меня есть вопрос, который раздражал меня в течение некоторого времени. Это должно быть просто, я просто не могу понять это.
В основном, в Chrome большинство разделов, созданных на странице http://loveireland.evolvedublin.com/tours/, изменяются правильно при изменении размера браузера, но есть пара, которая перекрывает друг друга. Между 768px и 991px (поэтому медиа-запросы) пост для Национального музея восковых фигур перекрывается с Дублинским зоопарком. Это происходит дальше по странице с несколькими другими сообщениями, но большая часть страницы в порядке.
Это не проблема в Firefox.
Кроме того, когда экран ниже 767 пикселей, большинство разделов затем перекрываются друг с другом по вертикали.
Я попытался добавить в <div class="clearfix"></div>
в разных местах. Я пробовал разные вариации col-**-4
которые не помогли, и я также попытался изменить поплавки, но, похоже, что-то не работает.
Пример публикации HTML:
<div id="post-250" class="post-250 tours type-tours status-publish hentry col-lg-4 col-md-4 tour-thumb element-item" >
<div class="tour-frame">
<div class="tour-thumb-img">
<a href="http://loveireland.evolvedublin.com/tours/dublin-zoo/">
<img src="http://loveireland.evolvedublin.com/wp-content/uploads/2014/05/Dublin-Zoo2.jpg" class="img-responsive" alt=""/>
</a>
</div><!--tour-thumb-img-->
<div class="tour-thumb-text">
<!--TOUR TITLE-->
<h2 class="az za"><a href="http://loveireland.evolvedublin.com/tours/dublin-zoo/">Dublin Zoo</a></h2>
<!--TOUR EXCERPT-->
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mattis semper lorem, in volutpat mi adipiscing se
<div class="thumb-footer">
<div class="tripadvisor">
<img src="http://loveireland.evolvedublin.com/wp-content/themes/loveireland/images/trip-advisor-icon.png" class="trip-icon" alt="Trip Advisor Icon" />
</div><!--trip-advisor-->
<div class="green-btn">
<a href="http://loveireland.evolvedublin.com/tours/dublin-zoo/">VIEW TOUR</a>
</div><!--green-btn-->
</div><!--thumb-footer-->
<div class="clearfix clear"></div>
</div><!--tour-thumb-text-->
</div><!--tour-frame-->
Используемый CSS:
.tour-thumb{
margin: 0 0 30px 0;
}
.tour-frame{
border: 1px solid #e5e5e5;
background-color:#ffffff;
height:100%;
}
.tour-thumb-text{
padding: 0 10px 20px 10px;}
.tour-thumb a{
text-decoration:none;}
@media(max-width:767px){}
@media(min-width:768px){.tour-thumb{max-width: 357px !important; height: 390px;}}
@media(min-width:992px){.tour-thumb{max-width: 233px !important; height: 350px;}}
@media(min-width:1200px){.tour-thumb{max-width: 290px !important; height: 350px;}}
.tour-thumb h2{
font-size:12px;
font-weight:bold;
text-transform: uppercase;}
.tour-thumb h2 a{
color: #000000;
letter-spacing:2px;}
.tour-thumb h2 a:hover{
text-decoration:underline;}
.tour-thumb p{
font-size:14px;
letter-spacing:1px;}
.tour-thumb-img{
position:relative;}
.tour-thumb-price{
background: rgb(255,255,255);
background: rgba(255,255,255,0.9);
/*box-shadow: 0px 0px 10px #999999;*/
border: 1px solid #e5e5e5;
border-top: none;
position: absolute;
top:0;
right: 10px;
text-align:center;
padding: 10px;}
.tour-thumb-price h3{
font-size:18px;
font-weight:bold;
color:#8ac736;
padding: 0 0 0 0;
margin: 0 0 0 0;}
.tour-thumb-price p{
font-size:8px;
font-weight:bold;
padding: 0 0 0 0;
margin: 0 0 0 0;}
.thumb-footer{
display:block;
padding-top:10px;}
.tour-thumb .social{
display:inline-block;
float:left;
padding: 6px 0 6px 0;}
.tour-thumb .social img{
border:none;
margin-right:10px;}
.tour-thumb .social a{
color: #ffffff;}
.tour-thumb .green-btn{
float:right;
position:absolute;
right:20px;
/*margin-top:13px;*/}
.tour-thumb .tripadvisor{
/*margin-bottom:30px;*/
float:left;}
.tripadvisor img.trip-icon{
display:inline-block;
margin-top:4px;
float:left;}
.TA_cdsratingsonlynarrow{
display:inline-block;
float:left;}
.tour-detail .cdsROW.narrow{
text-align:left !important;
background-color:#fafafa; !important}
.tour-thumb .cdsROW.narrow{
text-align:left !important;
background-color:#ffffff; !important}
Как уже упоминалось, это работает в Firefox, хотя, когда экран меньше, чем 767px, столбцы фактически не изменяют размер, что также является проблемой в Chrome, как ни странно!
Надеюсь, кто-то может помочь, поскольку я очень застрял.
ура
С помощью @Miktown я добавил следующее в мой css, который решил проблему:
@media (min-width: 768px) and (max-width: 991px){
.tour-thumb {
width:50% !important;
}
}
@media (max-width: 767px){
.tour-thumb {
width:96% !important;
}
}
В ссылке, которую вы публикуете, есть css inline в позиции добавления div: абсолютные и левые и верхние значения, удалите ее или попробуйте переопределить ее:
@media (min-width: 768px){
.tour-thumb {
position: relative !important;
left: auto !important;
top: auto !important;
float: left;
}
}
float:none !important
для экранов под 768px, чтобы исправить проблему Firefox, упомянутую в моем последнем абзаце, однако, это, кажется, заставляет коробки двигаться беспорядочно, когда на браузерах меньшего размера тоже. Есть ли способ сделать эффект изотопа снова гладким?