我的 HTML 和 CSS 网站布局有问题。
顶部图像下方应该有 4 个框，目前只有 3 个。我希望它们在页面上均匀分布。看不见的是游戏的历史，我相信出于某种原因它在图像下面...
代码如下:
.jumbotron h1 {
color: #ffffff;
font-size: 150px;
font-family: Sans-serif;
font-weight: bold;
text-align: center;
margin-top: 0px;
}
.jumbotron {
background-image: url('http://i118.photobucket.com/albums/o117/Shawnthebro/bandicam2014-03-2311-20-03-210_zpse7f7712f.jpg');
position: absolute;
left: 0px;
top: 100px;
height: 350px;
display: block;
}
.nav li {
display: inline;
text-align: center;
color: #ff0000;
font-size: 50px;
bottom: 350px;
padding-left: 35px;
font-family: Sans-serif;
}
.page ul {
color: #000000;
font-size: 20px;
font-family: Calibri;
padding-left: 75px;
.page ul li {
display: inline;
}
.page a {
color: #000000;
font-size: 15px;
font-family: Calibri;
padding-left: 70px;
div.img {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 275px;
}
div.img:hover {
border: 1px solid #777;
}
div.img img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="home.css">
<title>Gaming T,N & B</title>
<style>
div.img {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 275px;
}
div.img:hover {
border: 1px solid #777;
}
div.img img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}
</style>
</head>
<body>
<div class="jumbotron">
<div class="container">
<h1>Gaming: Then, Now & Beyond</h1>
</div>
</div>
<div class="nav">
<div class="container">
<ul>
<li><a href="file:///Users/AdamMahmoud/Documents/School/Year%2010/IT/website_name/hog.html">History of Gaming</a>
</li>
<li><a href="file:///Users/AdamMahmoud/Documents/School/Year%2010/IT/website_name/atari.html">Atari</a>
</li>
<li><a href="file:///Users/AdamMahmoud/Documents/School/Year%2010/IT/website_name/othergames.html">Other Games</a>
</li>
<li><a href="file:///Users/AdamMahmoud/Documents/School/Year%2010/IT/website_name/future.html">Future</a>
</li>
</ul>
</div>
</div>
<div class="img">
<a target="_blank" href="history.png">
<img src="history.png" alt="The History of Gaming" width="300" height="200">
</a>
</div>
<div class="desc">
<div class="page">
<div class="container">
<h3>History of Gaming</h3>
<ul>
<li>What is gaming?</li>
<li>Pong</li>
<li>Technology Boom</li>
</ul>
<p><a href="file:///Users/AdamMahmoud/Documents/School/Year%2010/IT/website_name/hog.html">Learn more about the history of gaming</a>
</p>
</div>
</div>
</div>
<div class="img">
<a target="_blank" href="atari.jpg">
<img src="atari.jpg" alt="Atari" width="600" height="400">
</a>
<div class="desc">
<div>
<h3>Atari</h3>
<ul>
<li>40 years of fun</li>
<li>Who is Nolan Bushnell</li>
<li>Bought & Sold</li>
</ul>
<p><a href="file:///Users/AdamMahmoud/Documents/School/Year%2010/IT/website_name/atari.html">Learn more about Atari</a>
</p>
</div>
</div>
</div>
<div class="img">
<a target="_blank" href="xbox_ps1.jpg">
<img src="xbox_ps1.jpg" alt="Other Games" width="600" height="400">
</a>
<div class="desc">
<div>
<h3>Other Games</h3>
<ul>
<li>PC</li>
<li>Xbox</li>
<li>PlayStation</li>
</ul>
<p><a href="file:///Users/AdamMahmoud/Documents/School/Year%2010/IT/website_name/othergames.html">Learn more about other games</a>
</p>
</div>
</div>
</div>
<div class="img">
<a target="_blank" href="future_ocu.jpg">
<img src="future_ocu.jpg" alt="Future Gaming" width="600" height="400">
</a>
<div class="desc">
<div>
<h3>Future</h3>
<ul>
<li>Gaming in society</li>
<li>Who is driving who?</li>
<li>CrowdFunding</li>
</ul>
<p><a href="file:///Users/AdamMahmoud/Documents/School/Year%2010/IT/website_name/future.html">Learn about future gaming</a>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<iframe width="1150" height="315" src="http://www.youtube.com/embed/X1tBEKFYKJg?autoplay=1" style="border:5px dotted red">
</iframe>
</body>
</html>非常感谢
亚当
最佳答案
Bootstrap Example
有人建议使用 bootstrap，所以我为您创建了一个简单的示例。我希望它接近您要找的东西。
body {height 100%;
background:
url("http://www.designbolts.com/wp-content/uploads/2013/02/Rough-horizonal-lines-Grey-Seamless-Pattern-For-Website-Background.jpg");
}
.navbar {
margin: 0;
}
div.container {
width: 100%;
padding: 0;
text-align: center;
}
div.container>div.jumbotron {
color: white;
background-image:
url('http://i118.photobucket.com/albums/o117/Shawnthebro/bandicam2014-03-2311-20-03-210_zpse7f7712f.jpg');
text-shadow: black 2px 2px 8px;
}<!-- Latest compiled and minified CSS -->
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7"
crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css"
integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r"
crossorigin="anonymous">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed"
data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
aria-expanded="false">
<span class="sr-only">Toggle navigation</span> <span
class="icon-bar"></span> <span class="icon-bar"></span> <span
class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Some Title</a>
</div>
<div class="collapse navbar-collapse"
id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">History of Gaming</a></li>
<li><a href="#">Atari</a></li>
<li><a href="#">Other Games</a></li>
<li><a href="#">Future</a></li>
</ul>
</div>
</div>
</div>
</nav>
<div class="container">
<div class="jumbotron">
<h1>Gaming: Then, Now & Beyond</h1>
<p>Some extra text</p>
</div>
</div>
<article class="container">
<section class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img
src="http://images5.fanpop.com/image/photos/28000000/randomised-random-28065165-1024-819.jpg"
alt="...">
<div class="caption">
<h3>Atari</h3>
<ul>
<li>40 years of fun</li>
<li>Who is Nolan Bushnell</li>
<li>Bought & Sold</li>
</ul>
<p>
<a
href="file:///Users/AdamMahmoud/Documents/School/Year%2010/IT/website_name/hog.html">Learn
more about the history of gaming</a>
</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img
src="http://images5.fanpop.com/image/photos/28000000/randomised-random-28065165-1024-819.jpg"
alt="...">
<div class="caption">
<h3>Other Games</h3>
<ul>
<li>PC</li>
<li>Xbox</li>
<li>PlayStation</li>
</ul>
<p>
<a
href="file:///Users/AdamMahmoud/Documents/School/Year%2010/IT/website_name/othergames.html">Learn
more about other games</a>
</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img
src="http://images5.fanpop.com/image/photos/28000000/randomised-random-28065165-1024-819.jpg"
alt="...">
<div class="caption">
<h3>History of Gaming</h3>
<ul>
<li>What is gaming?</li>
<li>Pong</li>
<li>Technology Boom</li>
</ul>
<p>
<a
href="file:///Users/AdamMahmoud/Documents/School/Year%2010/IT/website_name/hog.html">Learn
more about the history of gaming</a>
</p>
</div>
</div>
</div>
</section>
<section class="panel panel-default">
<div class="panel-heading">YouTube Video</div>
<div class="panel-body">
<div class="embed-responsive embed-responsive-16by9">
<iframe width="1150" height="315"
src="http://www.youtube.com/embed/X1tBEKFYKJg?autoplay=0">
</iframe>
</div>
</div>
</section>
</article>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS"
crossorigin="anonymous" type="text/javascript"></script><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="home.css">
<title>Gaming T,N & B</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7"
crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css"
integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r"
crossorigin="anonymous">
<style>
body {height 100%;
background:
url("http://www.designbolts.com/wp-content/uploads/2013/02/Rough-horizonal-lines-Grey-Seamless-Pattern-For-Website-Background.jpg");
}
.navbar {
margin: 0;
}
div.container {
width: 100%;
padding: 0;
text-align: center;
}
div.container>div.jumbotron {
color: white;
background-image:
url('http://i118.photobucket.com/albums/o117/Shawnthebro/bandicam2014-03-2311-20-03-210_zpse7f7712f.jpg');
text-shadow: black 2px 2px 8px;
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed"
data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
aria-expanded="false">
<span class="sr-only">Toggle navigation</span> <span
class="icon-bar"></span> <span class="icon-bar"></span> <span
class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Some Title</a>
</div>
<div class="collapse navbar-collapse"
id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">History of Gaming</a></li>
<li><a href="#">Atari</a></li>
<li><a href="#">Other Games</a></li>
<li><a href="#">Future</a></li>
</ul>
</div>
</div>
</div>
</nav>
<div class="container">
<div class="jumbotron">
<h1>Gaming: Then, Now & Beyond</h1>
<p>Some extra text</p>
</div>
</div>
<article class="container">
<section class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img
src="http://images5.fanpop.com/image/photos/28000000/randomised-random-28065165-1024-819.jpg"
alt="...">
<div class="caption">
<h3>Atari</h3>
<ul>
<li>40 years of fun</li>
<li>Who is Nolan Bushnell</li>
<li>Bought & Sold</li>
</ul>
<p>
<a
href="file:///Users/AdamMahmoud/Documents/School/Year%2010/IT/website_name/hog.html">Learn
more about the history of gaming</a>
</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img
src="http://images5.fanpop.com/image/photos/28000000/randomised-random-28065165-1024-819.jpg"
alt="...">
<div class="caption">
<h3>Other Games</h3>
<ul>
<li>PC</li>
<li>Xbox</li>
<li>PlayStation</li>
</ul>
<p>
<a
href="file:///Users/AdamMahmoud/Documents/School/Year%2010/IT/website_name/othergames.html">Learn
more about other games</a>
</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img
src="http://images5.fanpop.com/image/photos/28000000/randomised-random-28065165-1024-819.jpg"
alt="...">
<div class="caption">
<h3>History of Gaming</h3>
<ul>
<li>What is gaming?</li>
<li>Pong</li>
<li>Technology Boom</li>
</ul>
<p>
<a
href="file:///Users/AdamMahmoud/Documents/School/Year%2010/IT/website_name/hog.html">Learn
more about the history of gaming</a>
</p>
</div>
</div>
</div>
</section>
<section class="panel panel-default">
<div class="panel-heading">YouTube Video</div>
<div class="panel-body">
<div class="embed-responsive embed-responsive-16by9">
<iframe width="1150" height="315"
src="http://www.youtube.com/embed/X1tBEKFYKJg?autoplay=0">
</iframe>
</div>
</div>
</section>
</article>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS"
crossorigin="anonymous" type="text/javascript"></script>
</body>
</html>
关于html - 我有 HTML 和 CSS 布局问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34801892/