首页 文章

创建两列响应式css html设计，在移动设备上缩小或查看时合并为1列

提问于
浏览 次
1

所以我不是非常精通网络，我在我的WordPress网站上创建一个FAQ页面，我想制作一个响应式的两列布局，其中包含一个问题列表，当用户点击其中一个锚点时，它会将它们归结为与大多数常见问题解答一样，页面上的答案 . 我希望这些链接的列表是两列布局，而网站上的其他所有内容都只有1列布局，我希望它非常流畅和美观 . 当屏幕缩小/被平板电脑或iPhone使用时，我希望两列布局最终合并为一列 . 这是我的代码，我觉得我很接近但是当我在WordPress中实现它时看起来很糟糕 . 有什么建议？

CSS

.linkcontainer {
  width:100%;
  padding-bottom: 25px;
}
.linkleft {
  width:50%;
  float:left;
}
.linkright {
  width:50%;
  float:left;
}

@media(max-width:400px) {
  .linkleft {
    width:100px;
    float:none;
    display:block;
    position:relative;
  }
  .linkright {
    width:100px;
    float:none;
    display:block;
    position:relative;
  }
}

HTML

<div class="linkcontainer">
  <div class="linkleft">
    <ul>
      <li><a href="#unique-identifier1">Can I ?</a></li>
      <li><a href="#unique-identifier2">How much does ?</a></li>
      <li><a href="#unique-identifier3">Is the process ?</a></li>
      <li><a href="#unique-identifier4">What do I need to ?</a></li>
      <li><a href="#unique-identifier5">What is the date?</a></li>
      <li><a href="#unique-identifier6">What information does the ?</a></li>
      <li><a href="#unique-identifier7">After being ?</a></li>
      <li><a href="#unique-identifier8">Where do I?</a></li>
      <li><a href="#unique-identifier9">How do I ?</a></li>
      <li><a href="#unique-identifier10">How do I ?</a></li>
    </ul>
  </div>
  <div class="linkright">
    <ul>
      <li><a href="#unique-identifier11">Registering as a </a></li>
      <li><a href="#unique-identifier12">Registering </a></li>
      <li><a href="#unique-identifier13">Am I able to charge ?    </a></li>
      <li><a href="#unique-identifier14">Can others be ?</a></li>
      <li><a href="#unique-identifier15">Can I perform ?</a></li>
      <li><a href="#unique-identifier16">What are the age limits ?</a></li>
      <li><a href="#unique-identifier17">What is the definition of ?</a></li>
      <li><a href="#unique-identifier18">What is the definition ?</a></li>
      <li><a href="#unique-identifier19">All other questions CLICK HERE</a></li>
      <li><a href="#unique-identifier20">All other OTHER questions CLICK HERE</a></li>
    </ul>
  </div>
</div>
html css wordpress responsive-design multiple-columns

3 回答

  • 2

    您可以使用移动优先方法来实现响应式布局 . 您应该自己扩展CSS以适合您的WordPress主题 .

    CSS

    .linkcontainer {
    width: 100%;
    padding-bottom: 25px;
    overflow: auto;
}
.linkleft, .linkright {
    display: block;
    width: 100%;
}

@media only screen and (min-width: 481px) {
    .linkleft, .linkright {
        display: inline-block;
        width: 50%;
        float: left;
    }
}

    Here is the fiddle .

    回复于
  • 0

    添加CSS移动媒体查询并将 .linkright 和 .linkleft 的宽度设置为100％（而不是现在的100px） .

    /* Smartphones (portrait and landscape) ----------- */
@media only screen and (max-device-width : 400px) {
   .linkleft {
     width:100%;
     float:none;
   }
   .linkright {
     width:100%;
     float:none;
   }
}
    回复于
  • 0

    在媒体查询中，尝试使用百分比宽度值，例如

    width:95%;

    如果你删除浮动并添加它也可能会有所帮助

    clear:both;
    回复于

相关问题