Question

完全不确定发生了什么，但是在最上面的图像之后我还有很大的差距。我一直在调整代码，使其具有响应性，然后添加了此图像，一切都被抛弃了。关于我在做什么错的任何想法。理想情况下，图像更接近下面两列内容。

我尝试弄乱flexbox，图像和nada正在发生。

    html {
    	width: 960px;
    	font-size: 100%;
    	font-family: "Arial", sans-serif;
    	color: #112271;
    	margin: 0 auto;
    }
    
    .flex-container {
    	width: 960px;
    	display: flex;
    	flex-direction: row;
    	flex-wrap: wrap;
    }
    
    .banner-image {
    	width: 960px;
    	min-height: 50px;
    	background: #112271;
    	padding-top:  10px;
    	padding-left: 20px;
    	padding-bottom: 10px;
    }
    
    .banner-image h1 {
    	color: white;
    }
    
    .topics-sidebar {
    	width: 320px;
    	padding-top: 40px;
    }
    
    .main-content {
    	width: 640px;
    	padding-top:  40px;
    }
    
    .individual-post {
    	margin-bottom: 50px;
    }
    
    .main-content p.return-link {
    	margin-bottom: 50px;
    }
    
    /* Left arrow for links that return to index.html */
    
    i {
    	border: solid #112271;
    	border-width: 0px 2px 2px 0px;
    	padding: 5px;
    	display: inline-block;
    }
    
    .left {
    	transform: rotate(135deg);
    	-webkit-transform: rotate(135deg);
      }
    
    
    ul {
    	list-style-type: none;
    	padding: 0;
    	line-height: 2;
    }
    
    a:link, a:visited {
    	color: #112271;
    }
    
    a:hover {
    	color: #F09F08 ;
    }

    <!DOCTYPE html>
    
    	<head>
    		<link rel="stylesheet" href="../html-visual/styles.css">
    		<title>HTML & CSS Cheatsheet</title>
    	</head>
    
    	<body>
    		<div class="flex-container">
    			<div class="banner-image">
    				<h1>HTML & CSS Cheatsheet</h1>
    			</div>
    			<div class="topics-sidebar">
    				<h3>Topics</h3>
    				<ul>
    					<a href="getting-started.html"><li>Getting Started</li></a>
    					<a href="css-intro.html"><li>CSS</li></a>
    					<a href="flexbox.html"><li>Flexbox</li></a>
    					<a href="forms.html"><li>Forms</li></a>
    					<a href="image.html"><li>Images</li></a>
    					<a href="links.html"><li>Links</li></a>
    					<a href="lists.html"><li>Lists</li></a>
    					<a href="responsive-design.html"><li>Responsive Design</li></a>
    					<a href="resources.html"><li>Resources</li></a>
    					<a href="tables.html"><li>Tables</li></a>
    				</ul>
    			</div>
    			<div class="main-content">
    					<h2>Recent Posts</h2>
    					<div class="individual-post">
    						<a href="#"><p>General Template</a> | Last Updated Dec. 3, 2019</p>
    						<p>This is the basic layout for a webpage.</p>
    					</div>
    					<div class="individual-post">
    						<a href="#"><p>Linking a CSS File</a> | Last Updated Dec. 3, 2019</p>
    						<p>Each HTML page must include a reference to the external style sheet file.</p>
    					</div>
    					<div class="individual-post">
    						<a href="#"><p>Box Model</a> | Last Updated Dec. 3, 2019</p>
    						<p>The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content.</p>
    					</div>	
    			</div>
    		</div>
    	</body>
    
    	<footer>
    	</footer>
    </html>

Answer 1

您只需要摆脱

padding-top: 40px

位于.main-content和.topics-sidebar

或将其更改为所需的任何值

一个更好的解决方案是设置

margin-bottom : (YOUR_VALUE)px

到您的.banner图片

如何消除图像后的空白？

1 个答案: