我有一个HTML & CSS布局问题
我有一个HTML & CSS布局问题
提问于 2016-01-14 23:42:05
我的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>
非常感谢
亚当
回答 3
Stack Overflow用户
回答已采纳
发布于 2016-01-15 00:34:18
您有一个div类"img“，用于在巨型加速器下面的三个盒子。其中每个都有一个div类"desc“。对于游戏历史，您需要将"desc“类div嵌套在"img”类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 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="">Learn more about the history of gaming</a>
</p>
</div>
</div>
</div>
</div>您发布的是在第一个img类div之外的desc类div。
Stack Overflow用户
发布于 2016-01-15 00:58:36
引导示例
有人建议使用引导程序，所以我为您创建了一个简单的示例。我希望它接近你正在寻找的东西。
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>Stack Overflow用户
发布于 2016-01-15 00:14:14
table{
TABLE-LAYOUT:FIXED;
border:solid;
width:100%;
}
td{
padding:5px;
width:25%;
border:solid grey
}<table>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td>veryveryverylongtest</td>
</tr>
</table>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/34801892
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号