骨架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

回答

相關問題