: nth-child (нечетный) не отображается, как ожидалось - PullRequest
0 голосов
/ 15 января 2020

У меня есть две страницы с результатами поиска из плагина Search & Filter, так как я не знаю, как создать запрос, и я сам * oop.

http://staging.montra.dk/tilbud & http://staging.montra.dk/events

Я хочу, чтобы результаты выглядели так же, как мои блоки на остальной части сайта; изображение с одной стороны - текст с другой, а затем переверните его в следующем ряду. Мне удалось отобразить это на любой другой странице, кроме страниц поиска и фильтрации. Это либо все изображения слева или справа, не переворачивая друг друга.

Я настроил div id #artikel на рабочих страницах, но это не сработает. Нужно ли мне использовать какой-то уникальный идентификатор здесь?

Это мой css из результатов php;

<section id="post-<? the_ID(); ?>" <? post_class('blok-item'); ?>>
<div class="container-wrap">
    <div class="container">
        <div id="search-blok" class="row">
            <div id="artikel">
                <div id="artikel-image" class="col-sm-12 col-md-12 col-lg-6" style="background:linear-gradient( rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.1)), url(<?php the_field( 'intro_billede' ); ?>); background-position: 0% 50%; background-size: cover;"></div>
                    <div id="artikel-content" class="col-sm-12 col-md-12 col-lg-6">
                        <div class="hotel-name-artikel">
                            <?php the_field( 'intro_lille_overskrift' ); ?>
                        </div>
                        <div class="artikel-overskrift">
                            <h2><?php the_title(); ?></h2>
                        </div>
                        <div class="artikel-intro">
                            <?php the_field( 'intro_tekst' ); ?>
                        </div>

                        <?php if ( get_field( 'intro_pris' ) ): ?>
                            <div class="pris-wrapper">
                                <h2 class="pris">KR. <?php the_field( 'intro_pris' ); ?>,-</h2>
                                <h4 class="pris-ekstra"><?php the_field( 'intro_pris_extra' ); ?></h4>
                            </div>
                        <?php endif ?>

                        <div class="artikel-link-container">
                            <?php if ( have_rows( 'links_repeater' ) ) : ?>
                                <?php while ( have_rows( 'links_repeater' ) ) : the_row(); ?>
                                    <?php $side_intro_repeater_knap_url = get_sub_field( 'side_intro_repeater_knap_url' ); ?>
                                        <?php if ( $side_intro_repeater_knap_url ) { ?>
                                            <a class="<?php the_sub_field( 'repeater_knap_farve' ); ?>" style="float:left" href="<?php echo $side_intro_repeater_knap_url; ?>"><?php the_sub_field( 'repeater_knap_tekst' ); ?></a>
                                        <?php } ?>
                                    <?php endwhile; ?>
                                        <?php else : ?>
                                            <?php // no rows found ?>
                            <?php endif; ?>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

и: nth-child css:

artikel:nth-last-child(odd) {
display: -webkit-flex; /* Safari */
  -webkit-flex-direction: row-reverse; /* Safari 6.1+ */
  display: flex;
flex-direction: row-reverse;
flex-wrap: wrap;
}

Теперь я не специалист по php или css, поэтому код может быть не совсем таким, каким он должен быть, поэтому, пожалуйста, помните об этом:)

Спасибо за помощь и помощь

Ответы [ 2 ]

1 голос
/ 21 января 2020

Я хочу, чтобы результаты выглядели так же, как мои блоки на остальной части сайта; изображение с одной стороны - текст с другой, а затем переверните его в следующей строке.

Я не совсем уверен, что понимаю вопрос, но если я это сделаю, вы определенно на правильном пути, используя flex-direction: row и flex-direction: row-reverse.

Рабочий пример:

article {
display: flex;
flex-direction: row;
justify-content: space-between;
width: 600px;
}

article:nth-of-type(even) {
flex-direction: row-reverse;
}

.text-block,
.image-block {
flex: 1 1 50%;
}

img {
display: block;
width: 90%;
height: 150px;
margin-top: 30px;
line-height: 150px;
text-align: center;
border: 1px solid rgb(0, 0, 0);
}
<main>
<article>
<div class="text-block">
<h2>Heading</h2>
<p>Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph.</p>
</div>
<div class="image-block">
<img src="" alt="Image" />
</div>
</article>

<article>
<div class="text-block">
<h2>Heading</h2>
<p>Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph.</p>
</div>
<div class="image-block">
<img src="" alt="Image" />
</div>
</article>

<article>
<div class="text-block">
<h2>Heading</h2>
<p>Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph.</p>
</div>
<div class="image-block">
<img src="" alt="Image" />
</div>
</article>

<article>
<div class="text-block">
<h2>Heading</h2>
<p>Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph.</p>
</div>
<div class="image-block">
<img src="" alt="Image" />
</div>
</article>
</main>
0 голосов
/ 21 января 2020

Это контейнер и две секции, которые я хотел бы отобразить flex; один с изображением слева и текстом справа. Следующая строка текста слева, изображение справа.

This is the container and two sections which i'd like to display flex; one with the image on the left and text on the right. The next row text on the left, image on the right.

   <div class="search-filter-results" id="search-filter-results-2898">
<div class="container" style="background-color:#21002c;color:#fff;">
	<div class="search-results"><h6>Viser 24 resultater</h6></div>
</div>

	<div class="pagination">

		<div class="nav-previous"><a href="http://staging.montra.dk/tilbud?sf_paged=2" >Ældre indlæg</a></div>
		<div class="nav-next"></div>
			</div>

	
			<section id="post-3293" class="blok-item post-3293 odderparkhotel type-odderparkhotel status-publish kategori-tilbud hoteller-odder-parkhotel">
	<div class="container-wrap">
		<div class="container">
			<div id="search-blok" class="row">
				<div class="artikel">
					<div class="artikel-image col-sm-12 col-md-12 col-lg-6" style="background:linear-gradient( rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.1)), url(http://staging.montra.dk/wp-content/uploads/2020/01/Weekend-intro.jpg); background-position: 0% 50%; background-size: cover;"></div>
						<div class="artikel-content col-sm-12 col-md-12 col-lg-6">
							<div class="hotel-name-artikel">
															</div>
							<div class="artikel-overskrift">
								<h2>Weekendphold for 2 i Jylland</h2>
							</div>
							<div class="artikel-intro">
								<p>Nyd et weekendophold for 2 på 4-stjernet hotel i Odder syd for Århus med velrenommeret køkken, som byder på udsøgte smagsoplevelser.</p>
							</div>

															<div class="pris-wrapper">
									<h2 class="pris">KR. 995,-</h2>
									<h4 class="pris-ekstra"></h4>
								</div>
							
							<div class="artikel-link-container">
																																																		<a class="knap-1" style="float:left" href="http://staging.montra.dk/odder-parkhotel/weekendphold-for-2-i-jylland">Læs mere</a>
																																							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
</section>
<section id="post-3290" class="blok-item post-3290 odderparkhotel type-odderparkhotel status-publish kategori-tilbud hoteller-odder-parkhotel">
	<div class="container-wrap">
		<div class="container">
			<div id="search-blok" class="row">
				<div class="artikel">
					<div class="artikel-image col-sm-12 col-md-12 col-lg-6" style="background:linear-gradient( rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.1)), url(http://staging.montra.dk/wp-content/uploads/2020/01/Aarhus-intro.jpg); background-position: 0% 50%; background-size: cover;"></div>
						<div class="artikel-content col-sm-12 col-md-12 col-lg-6">
							<div class="hotel-name-artikel">
								Montra Odderpark Hotel							</div>
							<div class="artikel-overskrift">
								<h2>Mangler du også en studiebolig til studiestart 2020</h2>
							</div>
							<div class="artikel-intro">
								<p>I Århus er der mangel på studieboliger og derfor vil vi på Montro Odder Parkhotel gerne hjælpe studerende, som er i akut boligmangel.</p>
							</div>

															<div class="pris-wrapper">
									<h2 class="pris">KR. 2.000,-</h2>
									<h4 class="pris-ekstra"></h4>
								</div>
							
							<div class="artikel-link-container">
																																																		<a class="knap-1" style="float:left" href="http://staging.montra.dk/odder-parkhotel/mangler-du-ogsaa-en-studiebolig">Læs mere</a>
																																							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
</section>
...