是否有可能有弹性箱之间的差距，同时仍然显示背景是什么？

问题描述 投票：0回答：1

我想这些部分之间腾出空间，同时还显示了背景，我不知道怎么样。我已经试过填充，使边框透明，但没有奏效。我想过用网格来代替，但我想看看我是否能同时仍然使用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>
html css html5 css3 flexbox
1个回答
2
投票

从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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.