我正在尝试使用 skeleton.css 在我的页面上获得三个部分(每个 1/3 长度)。该框架的网站是 skeleton .这是我的代码:
<!DOCTYPE html>
<html>
<head>
<style type="text/css" href="css/normalize.css" rel="stylesheet"></style>
<style type="text/css" href="css/skeleton.css" rel="stylesheet"></style>
</head>
<body>
<div class="container">
<div class="row">
<div class="three columns">
1
</div>
</div>
<div class="row">
<div class="three columns">
2
</div>
</div>
<div class="row">
<div class="three columns">
3
</div>
</div>
</div>
</body>
</html>
最佳答案
因为你想要你的列在 3rds 中，请改用 one-third 类并将第二个类固定到它只是 column 与 columns。您还应该删除两个额外的 row 容器并将它们全部放在一个容器中:
.example-grid .column {
background: #EEE;
text-align: center;
border-radius: 4px;
font-size: 1rem;
text-transform: uppercase;
height: 30px;
line-height: 30px;
margin-bottom: .75rem;
font-weight: 600;
letter-spacing: .1rem;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" rel="stylesheet" />
<!DOCTYPE html>
<html>
<head>
<style type="text/css" href="css/normalize.css" rel="stylesheet"></style>
<style type="text/css" href="css/skeleton.css" rel="stylesheet"></style>
</head>
<body>
<div class="container example-grid">
<div class="row">
<div class="one-third column">
1
</div>
<div class="one-third column">
2
</div>
<div class="one-third column">
3
</div>
</div>
</div>
</body>
</html>关于html - 行/列不适用于骨架 css，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47851551/