#html #css #wordpress
#HTML #css #wordpress
Вопрос:
я разрабатываю этот веб-сайт: www.sfitnesscenter.com
я пытаюсь сделать так, чтобы 4 поля под ползунком были выровнены по горизонтали 2 на 2 к центру. я пробовал использовать margin:auto, но ничего не изменилось.
вот html
<section id="wrapsecond">
<div class="container">
<div class="services-wrap">
<?php if( get_theme_mod('shortinfo_sb') ) { ?>
<?php echo get_theme_mod('shortinfo_sb'); ?>
<?php } else { ?>
<?php echo '<h2>What We Do</h2>
<p>We are passionate about our clients results.</p>'; } ?>
<div class="space50"></div>
<!-- Home Boxes Section -->
<div class="home_boxes">
<?php
for($bx=1; $bx<5; $bx ) {
if( get_theme_mod('page-setting'.$bx)) {
$bxquery = new WP_query('page_id='.get_theme_mod('page-setting'.$bx,true));
while( $bxquery->have_posts() ) : $bxquery->the_post();
?>
<div class="one_third <?php if($bx%4==0){ ?>last_column<?php } ?>">
<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?>
<h4><?php the_title(); ?></h4><?php echo fitnesslite_content(22); ?>
<span class="ReadMore"><?php _e('Read More','fitness-lite');?> </span>
</a>
</div>
<?php endwhile; }else{?>
<div class="one_third <?php if($bx%4==0){ ?>last_column<?php } ?>">
<a href="#"><img src="<?php echo get_template_directory_uri(); ?>/images/thumb_0<?php echo $bx; ?>.jpg"><h4><?php _e('Page Title','fitness-lite'); ?><?php echo $bx; ?></h4><p><?php _e('Phasellus viverra aliquet magna quis interduming. Sed quis fringilla massa. In ut porttitor felis necing iaculis mi. Proin tempo...','fitness-lite');?></p><span class="ReadMore"><?php _e('Read More','fitness-lite');?></span>
</a></div>
<?php }}?>
</div>
<!-- Home Boxes Section -->
</div><!-- services-wrap-->
<div class="clear"></div>
</div><!-- container -->
</section><div class="clear"></div>
и вот css
/* = Services section css
-------------------------------------------------------------- */
#wrapsecond{ background-color:#272727; color:#fff; padding-bottom:100px; }
.services-wrap, #FrontBlogPost .BlogPosts{ visibility:hidden;}
.one_third{ margin:0 5% 3.5% 0; float:left; padding:25px; border:2px solid #fff;}
.one_third:hover{ border-color:#ff4e1c;}
.one_third:hover .ReadMore{ background-color:#ff4e1c;}
.one_third img{ width:100%;}
.one_third h4{font:600 18px/22px 'Roboto',sans-serif; padding:20px 0; margin:0; text-transform:uppercase; color:#fff;}
.one_third h4 span{ color:#ff4e1c; font-weight:300;}
.one_third h4 span::after{content:" ________"; display:inline-block;}
.one_third p{ margin-bottom:20px; color:#fff;}
.last_column{clear:right; margin-right:0 !important; }
@media (max-width: 992px) {
.one_third { min-width: 45% }
}
@media (min-width: 992px) {
.one_third { max-width: 40% }
}
#wrapsecond h2{ font-size:40px; color:#fff; font-weight:600; margin-bottom:0; text-transform:uppercase; }
#wrapsecond h2 span{ color:#ff4e1c; font-weight:300; }
Примечание:
на самом деле макет должен быть таким
: вверху слева: класс аэробики,
вверху справа: класс танца живота,
внизу слева: класс йоги,
внизу справа: класс зумбы
он был параллелен по горизонтали и вертикали, пока мой клиент не разместил содержимое на днях. ничего не изменилось даже после удаления фотографий. итак, я не думаю, что это было вызвано размером этих фотографий
Комментарии:
1. Соотношение сторон исходной фотографии «класс танца живота» отличается от других. Исправление этого может быть немедленным способом решения этой проблемы.
2. хм … да, когда я изменил это на ту же фотографию, что и «аэробный класс», все вернулось к норме. итак, что я должен сделать, чтобы автоматически сделать это @NateWhittaker в WordPress? нужно ли мне устанавливать какой-то плагин?
3. Я бы не удивился, но я не знаю подходящего плагина WordPress с головы до ног. Будучи PHP, вы могли бы использовать свои собственные функции изображений PHP ( php.net/manual/en/ref.image.php ), хотя.
Ответ №1:
Измените display
количество полей на inline-block
и margin
немного уменьшите. И удалите float
. Измените .one_third
класс на следующий
.one_third {
margin: 0 3% 3.5% 0;
padding: 25px;
display: inline-block;
border: 2px solid #fff;
}
Избегайте использования символов с плавающей запятой. с этим приходится иметь дело.
Комментарии:
1. я поместил код в редактор CSS, но ничего не изменилось : (
2. @fady. нет, вам нужно удалить текущий класс .one_third и добавить приведенный выше код..