Question

在过去的几个小时里，我一直试图找到解决以下问题的方法。我有一个非常重量级的网站，使用一个简单的2列布局，包含一个固定宽度的侧边栏和一个内容列，填充剩余的空间。使用此设置，在大多数桌面分辨率上，内容区域将非常大。文本是在很多相对较短的部分组织的，所以它只是正常流动并不是很令人愉快，我发现的大多数解决方案似乎是报纸式的布局，组织这样的文章：（| m | =固定宽度侧栏）：

|m| |s1 s3|
|m| |s2 s4| 
|m| |s5 ..|

而不是所需的

|m| |s1 s2|
|m| |s3 s4|
|m| |s5 ..|

如果屏幕尺寸增长得足够小（低于某个阈值），则内容应折叠为1列。

|m| |a1|
|m| |a2|
|m| |a3|
|m| |..|

CSS3的列数与列宽相结合似乎做了我想要的，除了内容按列排序，如第一个例子所示，这是不可取的。 Flexbox 能够按行排序内容，但我没有设法在整个高度上制作宽度均匀的列，同时还保持了内容所需的灵活性。

该网站适用于有限的，已知的人群，因此仅支持HTML5 / CSS3的解决方案或在旧版Chrome / Firefox / IE中突破的解决方案完全没问题。

用于实现布局的CSS：

#siteWrapper { /* wraps #contentColumWrapper & #sidebarColumn
  width: 100%;
  margin: 0 auto;
}
#contentColumnWrapper {
  float: left;
  width: 100%;
 }
#contentColumn {
   margin-left: 210px; /* Based on sidebar width */
}   
#sidebarColumn {
  float: left;
  width: 200px;
  margin-left: -100%;
}

HTML：

<div id="siteHeader"> ...</div> 
<div id="siteWrapper">  
  <div id="contentColumnWrapper">
    <div id="contentColumn" >
      <div id="...">...</div>
      <div id="...">...</div>
    </div>
  </div>
  <div id="sideBar>..</div>
</div>
<div id="siteFooter>..</div>

我最接近的是以下flex布局，脚本根据内容的宽度调整flex-basis，将其设置为half或full width。主要问题是flexbox似乎不能很好地处理高度。

.contentColumn {    
    display: inline-flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.contentColumn div {
    flex-basis: 0px; /* set by JavaScript */
}

但是它存在一个主要问题，比如说你的专栏文章比其他专栏少得多。举个例子： A：300px，B：150px，C：150px，D：150px，E：150px，布局将是，

|A B|
|A  |
|C D|

创建大量的空白垂直空间，应该是这样的：

|A B|
|A C|
|D E|

Answer 1

我希望这就是你所需要的：

＆＃13;

@import url(http://fonts.googleapis.com/css?family=Open+Sans);
 body {
  font-family: 'Open Sans', sans-serif;
  color: #666;
}
/* STRUCTURE */

#pagewrap {
  padding: 5px;
  width: 1000px;
  margin: 20px auto;
}
#header {
  height: 100px;
  padding: 0 15px;
}
#sidebar {
  float: left;
  width: 30%;
  padding: 5px 15px;
  margin: 0 5px 0 0;
}
#r-side {
  float: left;
  width: 66%;
}
#first {
  width: 295px;
  float: left;
  padding: 5px 15px;
  margin: 0 5px 0 0;
}
#second {
  width: 295px;
  /* Account for margins + border values */
  float: left;
  padding: 5px 15px;
}
#third {
  width: 295px;
  padding: 5px 15px;
  float: left;
  margin: 0 5px 0 0;
}
#forth {
  width: 295px;
  padding: 5px 15px;
  float: left;
}
#footer {
  clear: both;
  padding: 0 15px;
}
/************************************************************************************
MEDIA QUERIES
*************************************************************************************/

/* for 980px or less */

@media screen and (max-width: 980px) {
  #pagewrap {
    width: 100%;
  }
  #r-side {
    width: 49%;
  }
  #sidebar {
    width: 44%;
  }
  #first {
    clear: both;
    padding: 1% 4%;
    width: auto;
    float: none;
    margin: 0;
  }
  #second {
    clear: both;
    padding: 1% 4%;
    width: auto;
    float: none;
  }
  #third {
    clear: both;
    padding: 1% 4%;
    width: auto;
    float: none;
    margin: 0;
  }
  #forth {
    clear: both;
    padding: 1% 4%;
    width: auto;
    float: none;
  }
  #header,
  #footer {
    padding: 1% 4%;
  }
}
/* for 700px or less */

@media screen and (max-width: 600px) {
  #sidebar {
    width: 45%;
  }
  #r-side {
    width: 45%;
  }
  #first {
    width: auto;
    float: none;
  }
  #second {
    width: auto;
    float: none;
  }
  #third {
    width: auto;
    float: none;
  }
  #forth {
    width: auto;
    float: none;
  }
}
/* for 480px or less */

@media screen and (max-width: 480px) {
  #header {
    height: auto;
  }
  #sidebar {
    width: 42%;
  }
  #r-side {
    width: 42%;
  }
}
#first {
  background: #f8f8f8;
}
#sidebar {
  background: #f0efef;
}
#header,
#first,
#second,
#third,
#forth {
  margin-bottom: 5px;
}
#pagewrap,
#header,
#first,
#second,
#third,
#forth,
#sidebar,
#footer {
  border: solid 1px #ccc;
}

＆＃13;

<div id="pagewrap">

  <div id="header">
    <h1>Responsive Layout</h1>
  </div>
  <div id="sidebar">
    <h2>This is Siderbar</h2>
    <p>The Test text goes here</p>
  </div>
  <div id="r-side">
    <div id="first">
      <h2>1st Content Area</h2>
      <p>The Test text goes here</p>
    </div>

    <div id="second">
      <h2>2nd Content Area</h2>
      <p>The Test text goes here</p>
    </div>

    <div id="third">
      <h2>3rd Content Area</h2>
      <p>The Test text goes here</p>
    </div>

    <div id="forth">
      <h2>4th Content Area</h2>
      <p>The Test text goes here</p>
    </div>
  </div>
  <div id="footer">
    <h4>Footer</h4>
    <p>Footer text</p>
  </div>

</div>

＆＃13;

将内容拆分为灵活的列数

1 个答案: