使用 CSS 的流畅布局答案

【问题标题】：Fluid layout with CSS使用 CSS 的流畅布局
【发布时间】：2012-12-30 01:02:04
【问题描述】：

我有一个页面，其中有 10 个 div 作为大按钮，显示在 2 行，每行 5 个，但我希望这样，如果页面被调整大小或在具有较小屏幕的设备上打开，则按钮会自动更改，但我不知道该怎么做。

我应该从哪里开始寻找，或者有没有人知道任何可以帮助我实现这一目标的好教程？

谢谢

【问题讨论】：

那么当页面调整大小时会发生什么？你想拥有相同的 2 行，每行 5，但 div 更小吗？
嗨，我希望 div 将自己重新排列成新的行，比如 3x3 加 1

标签： css fluid-layout liquid-layout

【解决方案1】：

其名称是响应式（或响应式）设计。你可以在这里找到一个不错的介绍：http://netuncovered.com/2011/05/reactive-web-design/

这一切都归结为 CSS 中的 @media 查询来确定您正在处理的窗口的大小，并相应地更改样式。比如：

@media screen and (min-width:768px)
{
    .my_div { width: 200px; }
}
@media screen and (min-width:1024px)
{
    .my_div { width: 300px; }
}

此示例根据窗口大小为您提供不同的 div 大小。您可以使用 @media 查询根据屏幕大小执行相同的定位或任何其他 CSS 规则。

对于如何更改一行中的项目数的具体问题，假设您有以下 HTML：

<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="clear3"></div>
<div class="item"></div>
<div class="item"></div>
<div class="clear5"></div>
<div class="item"></div>
<div class="clear3"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="clear3"></div>
<div class="item"></div>

您可以根据视口的大小指定 .clear3 或 .clear5 类实际清除浮动的时间。比如：

.item { float: left; width: 200px; }
@media screen and (min-width:768px)
{
    .clear3 { clear: both; }
    .clear5 { clear: none; }
}
@media screen and (min-width:1024px)
{
    .clear3 { clear: none; }
    .clear5 { clear: both; }
}

这将根据屏幕大小改变每行 .item div 的 div 数量。我想。我并没有真正测试它。

【讨论】：

【解决方案2】：

响应式设计：我就是这样学的-

付费但完全值得： http://www.codeschool.com/courses/journey-into-mobile

键入 Twiiter Bootstap 响应部分以了解它们的工作原理，这样做我学到了很多： https://github.com/twitter/bootstrap/blob/master/less/responsive-768px-979px.less

您需要熟悉媒体查询：

https://developer.mozilla.org/en-US/docs/CSS/@media

有响应页面大小的最小宽度和最大宽度助手。

【讨论】：

谢谢你，我听说过关于 codeschool 的好消息，我去看看

【解决方案3】：

关于如何开始响应式设计的优秀文章：

http://www.onextrapixel.com/2012/04/23/responsive-web-design-layouts-and-media-queries/

【讨论】：

【解决方案4】：

这可以在没有任何媒体查询的情况下完成

<div id="wrapper">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>10</div>
</div>

CSS：

#wrapper { max-width: 750px; overflow: hidden; border: 1px solid #000; margin: 50px auto; }
#wrapper div { width: 150px; height: 150px; float: left; }

【讨论】：