2017-12-17 1 views
0

私のページにskeleton.cssを使用して3つのセクション(各1/3の長さ)を取得しようとしています。フレームワークのウェブサイトはskeletonです。あなたが3rdsであなたの列が、代わりにone-thirdクラスを使用し、それだけでcolumncolumnsだところに第二のクラスを修正したいということでスケルトンcssで行/列が機能しない

<!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> 

答えて

1

:これは私のコードです。また、1つには二つの追加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>

関連する問題