body{background-image: url(images/boy_naruto_blond_drop_stern_look_24237_1366x768.jpg);background-attachment: fixed; }
@font-face{
font-family:pagal;
src:url("fonts/Pagal Font.ttf");}
@font-face{
font-family:folktale;
src:url("fonts/Folktale.ttf");
}
#titl{
font-family:folktale;
text-align:center;
color: aliceblue;
font-stretch: ultra-expanded;
font-size: 40px;
background: rgba(44,95,188,0.3);
back
}
h1{color: rgb(255,201,14);margin-bottom: 0px;padding-bottom: 0px;border: 0px;}
sub{margin-top: 0px;padding-top: 0px;border-spacing: 0px;}
.icon{height: 150px;width: 200px;text-align: center;}
#naruto{display: table-cell;padding: 20px;background: rgba(220,199,48,0.5);}
#sasuke{display: table-cell;padding: 20px;background: rgba(81,81,255,0.5);}
#sakura{display: table-cell;padding: 20px;background: rgba(231,126,176,0.5);}
#container{display: table-row;}
#table1{display: table;margin: 50px;text-align: center;margin-left: auto;margin-right: auto;}
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Home</title>
<link type="text/css" rel="stylesheet" href="main.css">
</head>
<body>
<div id="titl"><h1>NARUTO</h1><sub>never give up</sub></div>
<div id="table1"><div id="container">
<div id="naruto"><table><tr><td><img src="images/the_smile_of_uzumaki_by_katsuuyu-d6g8nw6.png" alt="naruto" class="icon"></td></tr><tr><td>NARUTO UZUMAKI</td></tr></table></div>
<div id="sasuke"><table><tr><td><img src="images/sasuke__s_smile_by_gaarajapanime-d4n09eb.png" class="icon" alt="sasuke"></td></tr><tr><td>SASUKE UCHIHA</td></tr></table></div>
<div id="sakura"><table><tr><td><img src="images/Sakura.PNG" class="icon" alt="sakura"></td></tr><tr><td>SAKURA HARUNA</td></tr></table></div></div></div>
</body>
</html>
IMAGELINK:https://drive.google.com/file/d/0B9RbEZnGFP1JUjE3N1NjZGJoUFU/view?usp=sharing
答案 0 :(得分:1)
如果我理解了这个问题,你想在每个区块之间留一个空格?如果是这样,请为火影忍者,佐助和樱花分配一个班级(即.cell
)。然后使用
.cell {
margin: 0 5px;
}
这将在顶部和底部添加0的边距,每边的间距为5px。
还要避免在CSS中重复。您可以合并display: table-cell;padding: 20px;
并将其放入.cell
课程中。如果您需要更改填充更容易,例如;)
希望这会有所帮助。
答案 1 :(得分:1)
将以下内容插入#table1
border-spacing:5px; border-collapse:separate;
有关详细信息,请参阅:https://stackoverflow.com/a/16398904/4665
body{background-image: url(images/boy_naruto_blond_drop_stern_look_24237_1366x768.jpg);background-attachment: fixed; }
@font-face{
font-family:pagal;
src:url("fonts/Pagal Font.ttf");}
@font-face{
font-family:folktale;
src:url("fonts/Folktale.ttf");
}
#titl{
font-family:folktale;
text-align:center;
color: aliceblue;
font-stretch: ultra-expanded;
font-size: 40px;
background: rgba(44,95,188,0.3);
back
}
h1{color: rgb(255,201,14);margin-bottom: 0px;padding-bottom: 0px;border: 0px;}
sub{margin-top: 0px;padding-top: 0px;border-spacing: 0px;}
.icon{height: 150px;width: 200px;text-align: center;}
#naruto{display: table-cell;padding: 20px;background: rgba(220,199,48,0.5);}
#sasuke{display: table-cell;padding: 20px;background: rgba(81,81,255,0.5);}
#sakura{display: table-cell;padding: 20px;background: rgba(231,126,176,0.5);}
#container{display: table-row;}
#table1{display: table;margin: 50px;text-align: center;margin-left: auto;margin-right: auto; border-spacing:5px; border-collapse:separate;}
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Home</title>
<link type="text/css" rel="stylesheet" href="main.css">
</head>
<body>
<div id="titl"><h1>NARUTO</h1><sub>never give up</sub></div>
<div id="table1"><div id="container">
<div id="naruto"><table><tr><td><img src="images/the_smile_of_uzumaki_by_katsuuyu-d6g8nw6.png" alt="naruto" class="icon"></td></tr><tr><td>NARUTO UZUMAKI</td></tr></table></div>
<div id="sasuke"><table><tr><td><img src="images/sasuke__s_smile_by_gaarajapanime-d4n09eb.png" class="icon" alt="sasuke"></td></tr><tr><td>SASUKE UCHIHA</td></tr></table></div>
<div id="sakura"><table><tr><td><img src="images/Sakura.PNG" class="icon" alt="sakura"></td></tr><tr><td>SAKURA HARUNA</td></tr></table></div></div></div>
</body>
</html>
答案 2 :(得分:1)
我采取了另一种方法并更改显示:table-cell;通过display:inline-block;
试试这段代码:
#naruto{display:inline-block; margin-right:10px;padding: 20px;
background: rgba(220,199,48,0.5);}
#sasuke{display:inline-block; margin-right:10px;padding: 20px;
background: rgba(81,81,255,0.5);}
#sakura{display:inline-block; margin-right:10px;padding: 20px;
background: rgba(231,126,176,0.5);}