我试图在这些部分之间留出空间,同时仍显示背景,但不确定如何做。我尝试了填充和使边框透明,但这没有用。我考虑过改用网格,但是我想看看在仍然使用flex的情况下是否可以这样做。谢谢
This is what it looks like with the background
body{
font-family:'Helvetica';
float:center;
background-color:#606060;
background-image:url(images/image1.jpg);
background-size:2048px 1152px;
background-repeat:no-repeat;
}
a{
text-decoration:none;
color:#BF9553;
}
a:hover{
color:white;
}
a:active{
color:white;
}
a:visited{
color:none;
}
#header{
color:#BF9553;
text-align:center;
font-size:60px;
}
#clockbox{
color:#BF9553;
text-align:center;
font-size:20px;
margin-top:-75px;
padding-bottom:25px;
}
.links{
border:1px solid #2E2E2E;
padding:10px;
list-style-type:none;
line-height:1.6em;
align-content:center;
}
.container-1{
background-color:#404040;
display:flex;
width:550px;
margin: 0 auto;
justify-content:space-around;
}
#general{
flex:1;
}
#manga{
flex:1;
}
#mail{
flex:1;
}
.container-2{
background-color:#404040;
display:flex;
width:550px;
margin: 0 auto;
}
#torrents{
flex:1;
}
<!DOCTYPE html>
<html>
<head>
<title>Startpage</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<div id="header">
<h1>Hello, Kyle</h1>
</div>
<div id="clockbox"></div>
<script type="text/javascript">
function GetClock(){
var d=new Date();
var nmonth=d.getMonth(),ndate=d.getDate(),nyear=d.getFullYear();
var nhour=d.getHours(),nmin=d.getMinutes(),nsec=d.getSeconds();
if(nmin<=9) nmin="0"+nmin;
if(nsec<=9) nsec="0"+nsec;
var clocktext=""+ndate+"."+(nmonth+1)+"."+nyear+" "+nhour+":"+nmin+":"+nsec+"";
document.getElementById('clockbox').innerHTML=clocktext;
}
GetClock();
setInterval(GetClock,1000);
</script>
</div>
</header>
<div class="container-1">
<div id="general" class="links">
<li><a href="https://duckduckgo.com">duckduckgo</a></li>
<li><a href="https://youtube.com/feed/subscriptions">youtube</a></li>
<li><a href="https://netflix.com/browse">netflix</a></li>
<li><a href="https://twitch.tv/directory/following">twitch</a></li>
<li><a href="https://twitter.com">twitter</a></li>
<li><a href="https://hulu.com">hulu</a></li>
</div>
<div id="manga" class="links">
<li><a href="https://myanimelist.net">myanimelist</a></li>
<li><a href="https://mangadex.org/manga/1054/it-s-not-my-fault-that-i-m-not-popular">watamote</a></li>
<li><a href="https://mangadex.org/manga/4880/jojo-s-bizarre-adventure-part-8-jojolion">jojolion</a></li>
<li><a href="https://mangadex.org/manga/350/vinland-saga">vinland saga</a></li>
<li><a href="https://mangakakalot.com/manga/hgj2047065412">goblin slayer</a></li>
<li><a href="https://mangakakalot.com/manga/goblin_slayer_side_story_year_one">goblin slayer: year one</a></li>
</div>
<div id="mail" class="links">
<li><a href="https://gmail.com">gmail</a></li>
<li><a href="https://mail.protonmail.com/inbox">protonmail</a></li>
<li><a href="https://icloud.com">icloud</a></li>
</div>
</div>
<div class="container-2">
<div id="torrents" class="links">
<li><a href="https://nyaa.si/">nyaa</a></li>
<li><a href="https://forum.snahp.it/">snahp.it</a></li>
<li><a href="https://reddit.com/r/megalinks/">megalinks</a></li>
</div>
<div>
</div>
</div>
</body>
</html>
最佳答案
从background-color: #404040;
删除class="container-1"
并将background
和margin
添加到.links
body{
font-family:'Helvetica';
float:center;
background-color:#606060;
background-image:url(images/image1.jpg);
background-size:2048px 1152px;
background-repeat:no-repeat;
}
a{
text-decoration:none;
color:#BF9553;
}
a:hover{
color:white;
}
a:active{
color:white;
}
a:visited{
color:none;
}
#header{
color:#BF9553;
text-align:center;
font-size:60px;
}
#clockbox{
color:#BF9553;
text-align:center;
font-size:20px;
margin-top:-75px;
padding-bottom:25px;
}
.links{
border: 1px solid #2E2E2E;
padding: 10px;
list-style-type: none;
line-height: 1.6em;
align-content: center;
background-color: #404040;
margin: 3px;
}
.container-1{
display:flex;
width:550px;
margin: 0 auto;
justify-content:space-around;
}
#general{
flex:1;
}
#manga{
flex:1;
}
#mail{
flex:1;
}
.container-2{
background-color:#404040;
display:flex;
width:550px;
margin: 0 auto;
}
#torrents{
flex:1;
}
<!DOCTYPE html>
<html>
<head>
<title>Startpage</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<div id="header">
<h1>Hello, Kyle</h1>
</div>
<div id="clockbox"></div>
<script type="text/javascript">
function GetClock(){
var d=new Date();
var nmonth=d.getMonth(),ndate=d.getDate(),nyear=d.getFullYear();
var nhour=d.getHours(),nmin=d.getMinutes(),nsec=d.getSeconds();
if(nmin<=9) nmin="0"+nmin;
if(nsec<=9) nsec="0"+nsec;
var clocktext=""+ndate+"."+(nmonth+1)+"."+nyear+" "+nhour+":"+nmin+":"+nsec+"";
document.getElementById('clockbox').innerHTML=clocktext;
}
GetClock();
setInterval(GetClock,1000);
</script>
</div>
</header>
<div class="container-1">
<div id="general" class="links">
<li><a href="https://duckduckgo.com">duckduckgo</a></li>
<li><a href="https://youtube.com/feed/subscriptions">youtube</a></li>
<li><a href="https://netflix.com/browse">netflix</a></li>
<li><a href="https://twitch.tv/directory/following">twitch</a></li>
<li><a href="https://twitter.com">twitter</a></li>
<li><a href="https://hulu.com">hulu</a></li>
</div>
<div id="manga" class="links">
<li><a href="https://myanimelist.net">myanimelist</a></li>
<li><a href="https://mangadex.org/manga/1054/it-s-not-my-fault-that-i-m-not-popular">watamote</a></li>
<li><a href="https://mangadex.org/manga/4880/jojo-s-bizarre-adventure-part-8-jojolion">jojolion</a></li>
<li><a href="https://mangadex.org/manga/350/vinland-saga">vinland saga</a></li>
<li><a href="https://mangakakalot.com/manga/hgj2047065412">goblin slayer</a></li>
<li><a href="https://mangakakalot.com/manga/goblin_slayer_side_story_year_one">goblin slayer: year one</a></li>
</div>
<div id="mail" class="links">
<li><a href="https://gmail.com">gmail</a></li>
<li><a href="https://mail.protonmail.com/inbox">protonmail</a></li>
<li><a href="https://icloud.com">icloud</a></li>
</div>
</div>
<div class="container-2">
<div id="torrents" class="links">
<li><a href="https://nyaa.si/">nyaa</a></li>
<li><a href="https://forum.snahp.it/">snahp.it</a></li>
<li><a href="https://reddit.com/r/megalinks/">megalinks</a></li>
</div>
<div>
</div>
</div>
</body>
</html>
关于html - 在仍然显示背景的情况下, flexbox 之间是否有空隙?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/54500663/