我正在制作我的第一个网站，但遇到了一些关于表格和背景的问题。这是我用手机拍的屏幕照片。如果我在电脑屏幕上预览它，它看起来会好一点，因为我没有背景问题，但无论如何我无法弄清楚表格有什么问题(特别是第 4 张照片) 并且我的背景没有响应。顺便说一句，所有图片的尺寸都一样......
HTML
<html>
<body>
<head>
<meta charset="utf-8">
<title>Projects</title>
<link href="css2.css" rel="stylesheet" type="text/css">
</head>
<head>
<div class="logo" >
<img src="lg.png" alt="" width="180" height="178" class="logo"/>
</div>
<meta charset="utf-8">
<title>mt</title>
</head>
<body>
<nav>
<ul>
<li><a href="projects.html">PROJECTS</a></li>
<li><a href="About.html">ABOUT</a></li>
<li><a href="Contact.html">CONTACT</a></li>
</ul>
</nav>
<div class="box" >
<div class="table" >
<table width="900" height="200" border="0" cellspacing="7" cellpadding="9">
<tbody>
<tr>
<td>
<div class="row" >
<li>
<a href="project1.html">
<div class="raste">
<img src="logos.jpg" alt="" width="300"/>
</div>
</a>
</li>
</div>
</td>
<td>
<li>
<a href="project2.html">
<div class="raste">
<img src="elite.jpg" alt="" width="300"/>
</div>
</a>
</li>
</td>
<td>
<li>
<a href="project3.html">
<div class="raste">
<img src="time.jpg" alt="" width="300"/>
</div>
</a>
</li>
</td>
</tr>
<tr>
<td>
<li>
<a href="project4.html">
<div class="raste">
<img src="booksrie.jpg" alt="" width="300"/>
</div>
</a>
</li>
</td>
<td>
<li>
<a href="project5.html">
<div class="raste">
<img src="log.jpg" alt="" width="300"/>
</div>
</a>
</li>
</td>
<td>
<li>
<a href="project6.html">
<div class="raste">
<img src="log.jpg" alt="" width="300"/>
</div>
</a>
</li>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
CSS
@charset "utf-8";
.logo {
padding-bottom: 0.5%;
text-align: center;
}
nav {
font-family: "Proxima";
text-align: center;
font-size: 25px;
word-spacing: 80px;
padding-right: 50px;
padding-bottom: 1%;
padding-left: 50px;
color: #000000;
}
li {
display: inline;
color: #000000;
}
a {
text-decoration: none;
color: black;
}
a:hover {
color: lightgray;
}
a:active {
color: black;
}
body {
background-color: #F6F6F6;
}
table {
margin-left: auto;
margin-right: auto;
}
.raste img {
height: 190px;
width: 300px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
display: block;
border: none;
border-radius: 10px;
}
.raste img:hover {
-webkit-transform: scale(1.079);
transform: scale(1.079);
}
.table {
display: table;
margin: 1em auto;
}
.row {
display: table-row;
}
.raste {
display: table-cell;
}
@font-face {
font-family: Proxima;
src: url(Fonts/Proxima_Regular.otf);
}
ul {
padding: 0;
}
.box {
background:#000000;
width: 100%;
background-size: 0% auto;
margin-bottom: 5%;
border-radius: 10px;
padding-bottom: 1%;
padding-top: 1%;
}
最佳答案
使用引导网格示例 fiddle
HTML
<div class="main pull-left">
<div class="col-sm-6 col-md-4 box">1</div>
<div class="col-sm-6 col-md-4 box">2</div>
<div class="col-sm-6 col-md-4 box">3</div>
<div class="col-sm-6 col-md-4 box">4</div>
<div class="col-sm-6 col-md-4 box">5</div>
<div class="col-sm-6 col-md-4 box">6</div>
</div>
CSS
body{padding:0px; margin:0px;}
.main{width:100%; background:#000; border-radius:10px; padding:10px;}
.main .box{background:#fff; color:#000; border:solid 4px #000; padding:20px 0px; text-align:center;}
关于html - 为什么我的表格行没有正确对齐？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35481831/