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

Posted 2023-03-05

【中文标题】创建两列响应式 css html 设计，当缩小或在移动设备上查看时合并为 1 列

【英文标题】：create two column responsive css html design that merges into 1 column when shrunk or viewed on mobile device

【发布时间】：2014-08-22 13:27:57

【问题描述】：

所以我不是很精通网络，我在我的 WordPress 网站上创建了一个常见问题解答页面，我想制作一个响应式两列布局，其中包含一个问题列表，当用户单击其中一个锚点时，它需要他们一直到页面上的那个答案，就像大多数常见问题解答一样。我希望这些链接的列表采用两列布局，而网站上的所有其他内容都只是一列布局，我希望它非常流畅和美观。当屏幕缩小/被平板电脑或 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>

【问题讨论】：

尝试在您的媒体查询样式中设置width: 100%;。

什么不起作用？这是您的代码演示：jsfiddle.net/6njFL。它似乎按我的预期工作。尽管您可能希望在媒体查询中将宽度设置为 100% 而不是 100px。

好吧，当我使用 firefoxs 开发人员响应式设计工具对其进行测试时，一旦我将宽度缩小到 320 以下，我就看不到列表的一半？应该有 20 个项目，当我下降到那个宽度时，我只看到 10 个......但是你的权利，它应该工作！这就是为什么我有点沮丧，这可能与wordpress有关吗？

【参考方案1】：

添加一个 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;
   

【参考方案2】：

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

width:95%;

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

clear:both;

【参考方案3】：

您可以使用移动优先的方法来实现响应式布局。您应该自己扩展 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.

【讨论】：

+1。截至 TwentyTwelve（我认为？！）这是 WP 安装附带的“旗舰”主题的规范设计。这些主题非常适合学习响应式 WP 设计..

可能，我写答案的时候没有查。据说，TwentyTwelve（以及之后的任何官方主题）是学习响应式设计和 WordPress 主题开发的一个很好的例子。

啊这就是我想要的！！！但是我尝试了您的代码，当我在 wordpress 中预览它时，它只创建了 1 列……它现在甚至都没有显示。诡异的。我会继续搞砸的。我在本地对其进行了测试，并且可以正常工作。所以肯定是我的 wordpress 有冲突。

@user3688814 是显示空白还是什么都不显示？我已经编辑了我的答案和我的小提琴，看看它是否有效。看来我忘了把overflow: auto; 给.linkcontainer

不，它只是在单个列中显示所有这些 li 元素，即使窗口是最大的。