网站跨越整个网页，我不想要它

我正在开发一个网站，我想把它放在一个包装或容器，所以我可以限制我们说1000px而不是整个网页。网站跨越整个网页，我不想要它

HTML

<!DOCTYPE html> 
<div class="wrap"> 
<html> 
<head> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<link rel="stylesheet" type="text/css" href="style.css"> 

</head> 

<body> 

<div class="header"> 
    <h1>Family Restaurant</h1> 
</div> 

<div class="row"> 

<div class="col-3 menu"> 
    <ul> 
    <li>The Flight</li> 
    <li>The City</li> 
    <li>The Island</li> 
    <li>The Food</li> 
    </ul> 
</div> 

<div class="col-3"> 
    <h1>The City</h1> 
    <p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p> 
</div> 
<div class="col-3"> 
    <h1>The City</h1> 
    <p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p> 
</div> 

<div class="col-3 right"> 
    <div class="aside"> 
    <h2>What?</h2> 
    <p>Chania is a city on the island of Crete.</p> 
    <h2>Where?</h2> 
    <p>Crete is a Greek island in the Mediterranean Sea.</p> 

    </div> 
</div> 

</div> 

<div class="row"> 


<div class="col-3"> 
    <h1>The City</h1> 
    <p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p> 
</div> 
<div class="col-3"> 
    <h1>The City</h1> 
    <p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p> 
</div> 
<div class="col-3"> 
    <h1>The City</h1> 
    <p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p> 
</div> 
<div class="col-3"> 
    <h1>The City</h1> 
    <p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p> 
</div> 

</div> 


<div class="row"> 
<div class="col-12"> 
    <h1>The City</h1> 
    <p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.The city can be divided in two parts, the old town and the modern city.The city can be divided in two parts, the old town and the modern city.</p> 
</div> 
</div> 

<div class="row"> 
<div class="col-6"> 
    <h1>The City</h1> 
    <p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.The city can be divided in two parts, the old town and the modern city.The city can be divided in two parts, the old town and the modern city.</p> 
</div> 
<div class="col-6"> 
    <h1>The City</h1> 
    <p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.The city can be divided in two parts, the old town and the modern city.The city can be divided in two parts, the old town and the modern city.</p> 
</div> 
</div> 

<div class="footer"> 
    <p>Resize the browser window to see how the content respond to the resizing.</p> 
</div> 

</body> 
</html> 
</div>

CSS

* { 
    box-sizing: border-box; 
} 
.row::after { 
    content: ""; 
    clear: both; 
    display: block; 
} 
[class*="col-"] { 
    float: left; 
    padding: 15px; 
} 
html { 
    font-family: "Lucida Sans", sans-serif; 
} 
.header { 
    height:auto; 
    background-color: #9933cc; 
    color: #ffffff; 
    padding: 5px; 
} 
.menu ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
} 
.menu li { 
    padding: 8px; 
    margin-bottom: 7px; 
    background-color: #33b5e5; 
    color: #ffffff; 
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); 
} 
.menu li:hover { 
    background-color: #0099cc; 
} 
.aside { 
    background-color: #33b5e5; 
    padding: 15px; 
    color: #ffffff; 
    text-align: center; 
    font-size: 14px; 
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); 
} 
.footer { 
    background-color: #0099cc; 
    color: #ffffff; 
    text-align: center; 
    font-size: 12px; 
    padding: 15px; 
} 
/* For desktop: */ 
.col-1 {width: 8.33%;} 
.col-2 {width: 16.66%;} 
.col-3 {width: 25%;} 
.col-4 {width: 33.33%;} 
.col-5 {width: 41.66%;} 
.col-6 {width: 50%;} 
.col-7 {width: 58.33%;} 
.col-8 {width: 66.66%;} 
.col-9 {width: 75%;} 
.col-10 {width: 83.33%;} 
.col-11 {width: 91.66%;} 
.col-12 {width: 100%;} 
.col-50 {width: 50%;} 

@media only screen and (max-width: 768px) { 
    /* For mobile phones: */ 
    [class*="col-"] { 
     width: 100%; 
    } 
}

我加了包装类和风格，但它似乎并不奏效。

谢谢

来源

2016-12-02 Kevin

尝试把下面的body打开和关闭标签之间的一切。

JSFIDDLE

HTML

<div class="wrapper"> 
... 
</div>

CSS

.wrapper{ 
    max-width:1000px; 
    margin:0 auto; /* makes your content centered horizontally */ 
}

来源

2016-12-02 01:51:32 haxxxton

简单地套用CSS的包装像下面。

.wrapper { 
 
    width: 400px; //Edit to 1000px 
 
    padding-right: 15px; 
 
    padding-left: 15px; 
 
    margin-right: auto; 
 
    margin-left: auto; 
 
} 
 

 
.section { 
 
background: blue; 
 
}

<div class="wrapper"> 
 
    <div class="section"> 
 
    &nbsp; 
 
    </div> 
 
</div>

来源

2016-12-02 01:59:38 claudios

网站跨越整个网页，我不想要它

回答

相关问题