Question

我的网站中有一个部分显示3个文本框，下方有一个链接（下图）。

我正在针对较小的屏幕尺寸优化网站。当我在13英寸macbook pro上打开网站时，该部分看起来像这样（如下图所示）。

我似乎无法弄清楚造成这个问题的原因。我在下面发布与它相关的HTML和CSS。任何建议都非常感谢。

HTML：

<section class="success-stories group">

    <?php 
      $args = array(
        'post_type' => 'success',
        'posts_per_page' => 3,
        'order' => 'ASC'
      );

      $query = new WP_Query($args);

      $i = 1;
    ?>

    <?php while ($query->have_posts()) : $query->the_post(); ?>
      <div class="success-stories-div">
        <div class="success-stories-text">
          <p style="font-size: 120%;">Success Story</p>
          <?php the_content(); ?>
        </div>
        <a href="<?php the_permalink(); ?>">
          <div class="success-stories-link<?php echo $i; ?>">Hear More >
          </div>
        </a>
      </div>
      <?php $i++ ?>
    <?php endwhile; wp_reset_query(); ?>
    <div style="cursor: pointer" class="more-arrow">
      <img src="<?php bloginfo('stylesheet_directory'); ?>/images/success_right_arrow.png">
    </div>
</section>

CSS：

.success-stories {
  width: 100%;
  margin: 25px 0 0 105px;
  }

  .success-stories .success-stories-div {
    display: inline;
    margin: 0 6px 0px 6px;
  }

  .success-stories .success-stories-text {
    padding: 20px 75px 20px 20px;
    width: 100px;
    height: 200px;
    background-color: #F6F3F0;
    color: #093333;
    margin-bottom: 1em;
  }

  .success-stories .success-stories-link1 {
    margin-top: 1em;
    width: 150px;
    height: 50px;
    background-color: #F4B147;
    padding: 12px 0 0 15px;
  }

  .success-stories .success-stories-link2 {
    margin-top: 1em;
    width: 150px;
    height: 50px;
    background-color: #2D8482;
    padding: 12px 0 0 15px;
  }

  .success-stories .success-stories-link3 {
    margin-top: 1em;
    width: 150px;
    height: 50px;
    background-color: #8F0063;
    padding: 12px 0 0 15px;
  }

  .success-stories .success-stories-div a {
    color: #FFFFFF;
  }

  .success-stories .more-arrow {
    display: inline-block;
    float: left;
    padding: 140px 0 0 25px;
  }

  .success-stories .more-arrow img {
    height: 40px;
    width: 40px;
  }

Answer 1

您需要指定success-storie-div元素的宽度，并将其设置为inline-block（为了将它们水平居中 - 您必须将text-align: center添加到<div class="row"> <div class="col-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ultrices metus quis lacus suscipit pellentesque. Sed eu mollis magna. Suspendisse tristique enim a pretium tempus. In non urna ac nisl porta bibendum. Fusce pellentesque laoreet elit nec scelerisque. Curabitur dictum condimentum tincidunt. Vestibulum vitae rhoncus diam. Morbi sed dolor quis mauris posuere euismod. Nulla lobortis suscipit elementum. Donec eget volutpat urna. </div> <div class="col-3">Mauris vehicula dictum nibh a rutrum. Sed interdum, ex in facilisis euismod, enim ex vestibulum nulla, sit amet feugiat nisl nisi eu orci. Sed in diam et turpis ultricies sagittis. Cras molestie leo eget eros vestibulum vulputate. Donec arcu mi, efficitur vitae tincidunt efficitur, interdum in ex. Fusce lobortis, est nec scelerisque ullamcorper, urna purus luctus nibh, non sagittis dolor leo nec ipsum. Integer in mauris sit amet eros dignissim tempus.</div> <div class="col-3">Cras a est ultricies, mollis augue nec, blandit quam. Phasellus consectetur nibh id justo faucibus interdum quis vitae diam. Donec pellentesque neque non imperdiet viverra. Ut sit amet leo metus. Proin sit amet est enim. Etiam ornare ipsum ex, a facilisis turpis sodales a. Aenean vel sodales dui. Proin ac risus ornare, tincidunt metus vel, iaculis lectus. Aliquam a mauris turpis. Nunc diam libero, porttitor venenatis sem a, blandit volutpat metus.</div> </div>父元素也是。）

考虑以下示例HTML：

.row {
    text-align: center;
}
.col-3 {
    display: inline-block;
    width: 32%;
    margin: 0 2%;
    text-align: left;
    vertical-align: top;
}
.col-3:first-child, .col-3:last-child {
    margin: 0;
}

您需要以下css才能使它们成为三个响应列：

vertical-align: top

不要忘记列上的@media screen and (max-width: 768px) { .col-3 { display: block; margin: 0 0 20px; width: 100%; } }，以便它们贴在容器的顶部。

您可能希望在移动设备上以全宽显示它们，因为您可以使用以下媒体查询：

gradle -q dependencies

以下是fiddle说明这一点。

Divs浓缩到我网站的左侧部分

1 个答案: