Question

我在互联网上彻底搜索但无济于事。目前，我有left-author和right-author类

的以下文字

#wrapper-author {
  margin: 0 auto;
  padding: 15px;
  overflow: auto;
}
.left-author {
  width: 50%;
  vertical-align: top;
  float: left;
}
.right-author {
  width: 50%;
  vertical-align: top;
  float: right;
}

这是媒体查询。除left-author和right-author之外，每个查询都可以使用。

@media screen and (max-width: 380px) {
  .left-author .right-author {
    float: none;
    width: 100%;
    vertical-align: initial;
  }
  .widget_highlighted_posts .single-article {
    float: none;
    margin-right: 0;
    max-width: 100%;
  }
}

有谁知道我做错了什么？这是HTML ....

＆＃13;

<div id="wrapper-author">

  	<div class="left-author clearfix">

<h4>I guess you want to know who <?php the_author(); ?> is.</h4>

<span style="font-family: sofia-pro; font-size: 20px;"><?php the_author_meta( 'description' ); ?></span><?php
$count_posts = wp_count_posts();

$published_posts = $count_posts->publish;
?>

  	</div>
  	<div class="right-author clearfix">
<?php userphoto_the_author_photo() ?>

<div class="social-links">
<ul>
<li  style="font-family: aw-conqueror-carved-one;">Follow <?php the_author_meta( first_name ); ?> on</li>
		<?php $facebook = get_the_author_meta('facebook'); if ($facebook) { ?><li><a href="<?php the_author_meta('facebook'); ?>"  target="_blank"><i class="fa fa-facebook"></i></a></li><?php } ?>
		<?php $twitter = get_the_author_meta('twitter'); if ($twitter) { ?><li><a href="http://twitter.com/<?php the_author_meta('twitter'); ?>"  target="_blank"><i class="fa fa-twitter"></i></a></li><?php } ?>
		<?php $googleplus = get_the_author_meta('googleplus'); if ($googleplus) { ?><li><a href="<?php the_author_meta('googleplus'); ?>"  target="_blank"><i class="fa fa-google-plus"></i></a></li><?php } ?>
        <?php $instagram = get_the_author_meta('instagram'); if ($instagram) { ?><li><a href="<?php the_author_meta('instagram'); ?>"  target="_blank"><i class="fa fa-instagram"></i></a></li><?php } ?>
        <?php $pinterest = get_the_author_meta('pinterest'); if ($pinterest) { ?><li><a href="<?php the_author_meta('pinterest'); ?>"  target="_blank"><i class="fa fa-pinterest"></i></a></li><?php } ?>
        <?php $email = get_the_author_email(); if ($email) { ?><a href="mailto:<?php the_author_email(); ?>"><i class="fa fa-envelope"></i></a></li><?php } ?>
        <li><a href="http://maphappy.org/author/<?php the_author_meta( 'user_login' ); ?>/feed/"><i class="fa fa-rss"></i></a></li>
		</ul></div>

	</div>
</div>

＆＃13;

Answer 1

您缺少一个逗号,来分隔同一声明中的两个类

@media screen and (max-width: 380px) {
  .left-author, .right-author {
    float: none;
    width: 100%;
    vertical-align: initial;
  }
  .widget_highlighted_posts .single-article {
    float: none;
    margin-right: 0;
    max-width: 100%;
  }
}

更新：（OP已提供HTML代码）

您在li之前错过了a href:mailto开放标记（我从这里看到的不是问题）

所以，这是一个包含HTML的片段（不包括PHP标签）：

* {
    box-sizing:border-box;
    /*demo , applies box-model */
}
#wrapper-author {
    margin: 0 auto;
    padding: 15px;
    overflow: auto;
}
.left-author {
    width: 50%;
    vertical-align: top;
    float: left;
    border:1px dashed green   /* demo styles */
}
.right-author {
    width: 50%;
    vertical-align: top;
    float: right;
    border:1px dashed red   /* demo styles */
}
@media screen and (max-width: 380px) {
    .left-author, .right-author {
        float: none;
        width: 100%;
        vertical-align: initial;
    }
    .widget_highlighted_posts .single-article {
        float: none;
        margin-right: 0;
        max-width: 100%;
    }
}

<div id="wrapper-author">
  <div class="left-author clearfix">

    <h4>I guess you want to know who is.</h4>

    <span style="font-family: sofia-pro; font-size: 20px;"></span> 
  </div>
  <div class="right-author clearfix">
    <div class="social-links">
      <ul>
        <li style="font-family: aw-conqueror-carved-one;">Follow
          <li><a href="" target="_blank"><i class="fa fa-facebook"></i></a>

          </li>
          <li><a href="" target="_blank"><i class="fa fa-twitter"></i></a>

          </li>
          <li><a href="" target="_blank"><i class="fa fa-google-plus"></i></a>

          </li>
          <li><a href="" target="_blank"><i class="fa fa-instagram"></i></a>

          </li>
          <li><a href="" target="_blank"><i class="fa fa-pinterest"></i></a>

          </li>
         <!--the opening LI tag was missing here below -->
          <li><a href="mailto:"><i class="fa fa-envelope"></i></a>

          </li>
          <li><a href="http://maphappy.org/author/feed/"><i class="fa fa-rss"></i></a>

          </li>
      </ul>
    </div>
  </div>
</div>

媒体查询不适用于特定div类

1 个答案: