文章/答案/技术大牛

发布

社区首页 >问答首页 >如何获得除法之间的间距

问如何获得除法之间的间距
EN

Stack Overflow用户

提问于 2015-06-11 14:17:01

回答 3查看 67关注 0票数 5

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>

我在火影忍者佐助和樱花之间争取空间。我将每个div(火影忍者、佐助、樱仓)表示为表格单元格，并将这三个div封装在另一个div(display:表格行)中，最后放在div(id=table1，display: table )中。请帮帮我。

imageLink:https://drive.google.com/file/d/0B9RbEZnGFP1JUjE3N1NjZGJoUFU/view?usp=sharing

html

css

回答 3

Stack Overflow用户

发布于 2015-06-11 14:26:58

如果我理解这个问题，你想在每个区块之间留个空格？如果是这样的话，分配一个类(即.cell)给火影忍者，佐助和樱花。然后使用

.cell { 
  margin: 0 5px;
}

这将在顶部和底部添加0的边距，并在两侧添加5px的间距。

在CSS中也要避免重复。您可以合并display: table-cell;padding: 20px;并将其放入.cell类中。例如，如果您需要更改填充，则会更容易;)

希望这能帮上忙。

票数 1

Stack Overflow用户

发布于 2015-06-11 15:34:41

将以下内容插入到#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>

票数 1

Stack Overflow用户

发布于 2015-06-11 15:49:20

我采取了另一种方法，改变了display:table-cell；by 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);}

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/30773033

复制

相似问题

问如何获得除法之间的间距
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何获得除法之间的间距EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何获得除法之间的间距
EN