骨架css列

我最近发现了skeleton.css，这正是我在找的东西。我不太了解列，但按钮的示例完全符合我希望堆叠元素和屏幕缩小的要求。我的作品非常漂亮，但我还不够精通css，让按钮变成列。我已经减少了html和css代码的功能。有关如何将按钮转换为列的任何建议将不胜感激。骨架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) {}

来源

2014-12-13 Walter Collins

将按钮转换为列？或者您想将按钮放在列中 – 2014-12-13 04:45:15

按钮代码碰巧是在骨架示例中正确折叠的代码。我只想列 - 没有按钮。 – 2014-12-13 16:48:08

但你已经给了项目的按钮类 – 2014-12-13 16:50:14

我决定发挥它自己和替换的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) {}

来源

2014-12-14 04:23:17

回答

相关问题