个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
27
4
我最近发现了 skeleton.css，它正是我要找的。我不太了解列，但是按钮的示例完全符合我的要求，因为在屏幕变窄时堆叠元素。我所拥有的效果很好，但我还不够精通 css，无法将按钮制作成列。我已将 html 和 css 代码缩减为有效的代码。非常感谢任何有关如何将按钮转换为列的建议。
下面是我的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>Test</title>
<meta name="description" content="None">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="//127.0.0.1/css/normalize.css">
<link rel="stylesheet" href="//127.0.0.1/css/skeleton.css">
</head>
<body>
<div class="container" style="border:1px solid red;">
<div>
<a class="button" href="#">Would like column 1</a>
<button>Would like column 2</button>
<input value="Would like column 3" type="submit">
<input value="Would like column 4" type="button">
<input value="Would like column 5" type="button">
</div>
</div>
</body>
</html>
/* css */
.container {
position: relative;
width: 80%;
max-width: 960px;
margin: 0 auto;
padding: 0; }
.container .columns {
float: left;
width: 100%;
box-sizing: border-box; }
/* For devices larger than 550px */
@media (min-width: 550px) {
.container .columns {
margin-left: 4%; }
}
html {
font-size: 62.5%; }
body {
font-size: 1.5em;
line-height: 1.6;
font-weight: 400;
font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, ans-serif;
color: #222; }
a {
color: #1EAEDB; }
a:hover {
color: #0FA0CE;
}
.button,
button,
input[type="submit"],
input[type="button"] {
display: inline-block;
background-color: transparent;
border-radius: 4px;
color: #555;
text-align: center;
font-size: 11px;
font-weight: 600;
text-decoration: none;
cursor: pointer;
border: 1px solid #bbb;
height: 38px;
width:188px;
line-height: 38px;
padding: 0;
white-space: nowrap;
box-sizing: border-box;
}
button {
margin-bottom: 0;
}
.container:after,
.row:after/**,
.u-cf**/ {
content: "";
display: table;
clear: both;
}
/* Larger than mobile */
@media (min-width: 400px) {}
/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 550px) {}
/* Larger than tablet */
@media (min-width: 750px) {}
/* Larger than desktop */
@media (min-width: 1000px) {}
/* Larger than Desktop HD */
@media (min-width: 1200px) {}
最佳答案
我决定自己试一试，将输入替换为 div，并相应地更改了 css。下面的代码将生成五个等宽的列，随着屏幕变窄，它们将分四个阶段堆叠。它非常适合我的需要，而且非常简单。
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>Test</title>
<meta name="description" content="None">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="//127.0.0.1/css/normalize.css">
<link rel="stylesheet" href="//127.0.0.1/css/skeleton2.css">
</head>
<body>
<div class="container" style="border:1px solid red;">
<div class="column">Column 1<br>More stuff here</div>
<div class="column">Column 2</div>
<div class="column">Column 3</div>
<div class="column">Column 4</div>
<div class="column">Column 5</div>
</div>
</body>
</html>
.container {
position: relative;
width: 90%;
max-width: 960px;
margin: 0 auto;
padding: 0;
}
/* For devices larger than 550px */
@media (min-width: 550px) {
html {
font-size: 62.5%; }
body {
font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */
font-weight: 400;
font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #000;
}
.column {
display: inline-block;
width:188px;
vertical-align: text-top;
padding-left: 10px;
white-space: nowrap;
box-sizing: border-box;
}
/* Larger than mobile */
@media (min-width: 400px) {}
/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 550px) {}
/* Larger than tablet */
@media (min-width: 750px) {}
/* Larger than desktop */
@media (min-width: 1000px) {}
/* Larger than Desktop HD */
@media (min-width: 1200px) {}
关于css - 骨架 css 列，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27455611/
27
4
0
我被要求从存在的主干模型(可选)中删除几个属性。我的第一个意图是在模型上放置类似before_save回调的内容。但是我没有发现任何信息。 有可能在 Backbone 这样做吗？ 最佳答案 只需覆盖默
我对使用 Backbone .js模型获取方法感到非常困惑。请参阅以下示例 Backbone 路由器: profile: function(id) { var model = new Accoun
我想根据现有的分段创建骨架，类似于此处所做的(来自 sk-image): 但是我想对 3D 数据执行此操作。那里有代码吗？最好使用 Python，但任何语言都有帮助。 我知道 this很棒的网站，但我
通常，我为与之合作的后端开发人员创建静态html prototype/skeleton。这有助于在实施网站之前发现UI / IA中的错误并进行昂贵的重写。 我想更进一步，并创建这些prototypes
我最近发现了 skeleton.css，它正是我要找的。我不太了解列，但是按钮的示例完全符合我的要求，因为在屏幕变窄时堆叠元素。我所拥有的效果很好，但我还不够精通 css，无法将按钮制作成列。我已将
我正在使用 Skeleton.css 在 wordpress 中创建一个网格系统 教程显示了标题的以下标记，在这里您可以看到 Logo 有 3 个类，- 五列和 clearfix
我正在使用“Microsoft Kinect SDK 1.8”。对于骨架跟踪，我计算了 FPS，大约是 10-15。 “Microsoft”是否提供任何规范？我想提高骨架帧数据的 FPS，可以吗？ 最
我正在尝试将两个图像放在一个表单旁边，并使用骨架 css 使其响应: U
有谁知道我在哪里可以找到一个像样的框架页面或用于创建全 FBML Facebook 应用程序的示例？我查遍了官方维基并做了很多搜索，但我找不到任何可靠的东西。 wiki 中的大多数示例要么过时、损坏，
我想制作一个骨架 css 直到页面完全加载。我想到了这个解决方案。因此，如果 javascript 被禁用，我不会有任何问题。那是对的吗？也许你有更好的解决方案？谢谢! .slider {
我有一个使用骨架 css 实现的表单。我使用的是三列(即三分之一列)布局，但由于列内容的各自长度，这导致了大量空白。我更喜欢类似于以下的水平布局: 文本框 1 文本框 2 文本框 3 文本框4 文本框
假设我有一个名为 dict1 的字典，它具有我想要的新字典的骨架(顺序和嵌套深度)。例如: dict1 = { "Personnel": { "Performance": ""
就目前而言，这个问题不适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the
因此，我了解我们可以执行以下操作: Collection.fetch({success:function(){bla ..}}) 但是说我想要这样的事情: Collection.fetch({成功:功
我想开发一个 swift cocoa pod，但是我不知道如何开始。 Cocoapods 预发布版现在支持 swift但是他们目前没有说明如何创建新的 swift 项目 pod 的说明。 当前关于创建
我目前正在使用提供深度图的 Processing Kinect 库。如果可能的话，我想知道如何使用它并使用它来创建 2D 骨架。不在这里寻找任何代码，只是我可以用来实现这些结果的一般过程。 此外，鉴于
我创建了一个使用多个“ View ”运行的 Vaadin Web 应用程序。 我想做的是应用 MVC/MVP 设计模式，它将无缝集成各种 View 中显示的信息。 到目前为止，我有一个带有登录、注册和
如何实现下面提到的view the URL 一种加载 View ，类似于许多使用它的应用程序，如 TvShowTime 最佳答案 这称为微光效果。 Facebook 已经开源了一个库，提供类似 fac
据我所知，JAX-WS(JAX-RPC)的前身使用的是 客户端 stub (代理)服务器骨架(也称为服务器端 stub ，或 Tie)系统，用于客户端和服务之间的通信。 但是，如果我正在阅读 JAX-
我已经编写了一个 WSDL 来生成 stub 和骨架，但我的骨架没有在 eclipse 中生成。我正在使用 Eclipse 的 Helios 版本。 谁能说出 WSDL 的问题是什么？ 我想使用 Ax
我是一名优秀的程序员,十分优秀！