CSS佈局有點偏離（不顯示段落和標題）

我正在嘗試創建一個Web服務器，該服務器使用node.js而不使用快速或任何其他框架從文件夾提供html，css和jpeg文件。到目前爲止，它正在解決一個問題。標題和前幾句沒有出現。我怎樣才能解決它而不觸及CSS和HTML？這裏是什麼樣子http://imgur.com/G3LgtVW CSS佈局有點偏離（不顯示段落和標題）

我的文件夾結構如下所示：

folderName  
├── index.html  
├── style.css  
├── penguin.jpg  
test.js (which contains)

html, body { 
     height: 100%; 
    } 

    body, h1 { 
     margin: 10px; 
    } 

    body { 
     display: flex; 
     justify-content: center; 
     align-items: center; 
    } 

    main { 
     text-align: center; 
     color: navy; 
    } 

    figcaption { 
     font-size: 1.5em; 
     font-family: cursive; 
     font-size: 0.8em; 
     color: #001125; 
    }

<!--index.html--> 

<!DOCTYPE html> 
<html> 
    <head> 
     <link rel="stylesheet" href="style.css"/> 
     <title>Penguin</title> 
    </head> 
    <body> 
     <main> 
      <h1>Penguins</h1> 
      <p>Penguins (order Sphenisciformes, family Spheniscidae) are a group of aquatic, flightless birds. They live almost exclusively in the Southern Hemisphere, with only one species, the Galapagos penguin, found north of the equator. Highly adapted for life in the water, penguins have countershaded dark and white plumage, and their wings have evolved into flippers. Most penguins feed on krill, fish, squid and other forms of sealife caught while swimming underwater. They spend about half of their lives on land and half in the oceans. 

    Although almost all penguin species are native to the Southern Hemisphere, they are not found only in cold climates, such as Antarctica. In fact, only a few species of penguin live so far south. Several species are found in the temperate zone, and one species, the Galápagos penguin, lives near the equator..The largest living species is the emperor penguin (Aptenodytes forsteri): on average adults are about 1.1 m (3 ft 7 in) tall and weigh 35 kg (77 lb) or more. The smallest penguin species is the little blue penguin (Eudyptula minor), also known as the fairy penguin, which stands around 40 cm (16 in) tall and weighs 1 kg (2.2 lb). Among extant penguins, larger penguins inhabit colder regions, while smaller penguins are generally found in temperate or even tropical climates (see also Bergmann's rule). Some prehistoric species attained enormous sizes, becoming as tall or as heavy as an adult human. These were not restricted to Antarctic regions; on the contrary, subantarctic regions harboured high diversity, and at least one giant penguin occurred in a region around 2,000 km south of the equator 35 mya, in a climate decidedly warmer than today.</p> 
      <figure> 
       <img src="penguin.jpg" alt="Penguin"/> 
       <figcaption>Adélie penguin (Pygoscelis adeliae) feeding young. Like its relatives, a neatly bi-coloured species with a head marking. </figcaption> 
      </figure> 
     </main> 
    </body> 
</html>

來源

2017-04-08 user7836693

「的標題和前幾句沒有顯示出來，」因爲你定義body的顯示爲flex並居中其內容。

爲了您的HTML內容，我覺得flex-direction應該是column（垂直內容佈局），而不是默認值row，因此下面的CSS變化將解決這個問題：

body { 
    ... 
    flex-direction: column; 
    justify-content: flex-start; 
}

html, body { 
 
     height: 100%; 
 
    } 
 
    
 
    body, h1 { 
 
     margin: 10px; 
 
    } 
 
    
 
    body { 
 
     display: flex; 
 
     flex-direction: column; 
 
     justify-content: flex-start; 
 
     align-items: center; 
 
    } 
 
    
 
    main { 
 
     text-align: center; 
 
     color: navy; 
 
    } 
 
    
 
    figcaption { 
 
     font-size: 1.5em; 
 
     font-family: cursive; 
 
    \t font-size: 0.8em; 
 
     color: #001125; 
 
    }

<!--index.html--> 
 

 
<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
     <link rel="stylesheet" href="style.css"/> 
 
     <title>Penguin</title> 
 
    </head> 
 
    <body> 
 
     <main> 
 
      <h1>Penguins</h1> 
 
    \t \t <p>Penguins (order Sphenisciformes, family Spheniscidae) are a group of aquatic, flightless birds. They live almost exclusively in the Southern Hemisphere, with only one species, the Galapagos penguin, found north of the equator. Highly adapted for life in the water, penguins have countershaded dark and white plumage, and their wings have evolved into flippers. Most penguins feed on krill, fish, squid and other forms of sealife caught while swimming underwater. They spend about half of their lives on land and half in the oceans. 
 
    
 
    Although almost all penguin species are native to the Southern Hemisphere, they are not found only in cold climates, such as Antarctica. In fact, only a few species of penguin live so far south. Several species are found in the temperate zone, and one species, the Galápagos penguin, lives near the equator..The largest living species is the emperor penguin (Aptenodytes forsteri): on average adults are about 1.1 m (3 ft 7 in) tall and weigh 35 kg (77 lb) or more. The smallest penguin species is the little blue penguin (Eudyptula minor), also known as the fairy penguin, which stands around 40 cm (16 in) tall and weighs 1 kg (2.2 lb). Among extant penguins, larger penguins inhabit colder regions, while smaller penguins are generally found in temperate or even tropical climates (see also Bergmann's rule). Some prehistoric species attained enormous sizes, becoming as tall or as heavy as an adult human. These were not restricted to Antarctic regions; on the contrary, subantarctic regions harboured high diversity, and at least one giant penguin occurred in a region around 2,000 km south of the equator 35 mya, in a climate decidedly warmer than today.</p> 
 
      <figure> 
 
       <img src="penguin.jpg" alt="Penguin"/> 
 
       <figcaption>Adélie penguin (Pygoscelis adeliae) feeding young. Like its relatives, a neatly bi-coloured species with a head marking. </figcaption> 
 
      </figure> 
 
     </main> 
 
    </body> 
 
</html>

來源

2017-04-08 13:49:40 shaochuancs

很酷謝謝！現在工作。我認爲我的.js文件存在問題 – user7836693

我編輯了問題，因爲問題不在我的.js文件中，而是在使用css文件。再次感謝！ – user7836693

@ user7836693是你的問題解決了嗎？如果是的話，也許你可以「接受」這個答案？ – shaochuancs

CSS佈局有點偏離（不顯示段落和標題）

回答

相關問題