Question

所以我不知道为什么这个酒吧在这里：

The random bar that I have colored in blue in paint

这是a JSFiddle。我需要摆脱淡黄色的酒吧。

以下是代码段中的相同代码：

body {
  padding: 0;
  margin: 0;
  background-color: #fff9e8;
}

.topnav {
  background-color: #edeff2;
  overflow: hidden;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  width: 100%;
  padding: 0;
}

.topnav a {
  float: left;
  display: block;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  font-family: 'Fresca', sans-serif;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
  background-color: #4CAF50;
  color: white;
}

.maincontent {
  width: 1000px;
  margin: 0 auto;
  background-color: #fff;
  padding-top: 25px;
}

.infotexta {
  text-align: center;
}

img {
  background-color: #fff;
  margin: 0;
  padding: 0;
}

.middlebar {
  height: 50px;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  width: 100%;
  background-color: #edeff2;
  padding: 0;
  margin: 0;
}

.main-image-front {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 400px;
}

<!DOCTYPE html>

<html>

<head>
  <title>placeholder</title>
  <!-- css -->
  <link href="mainstyle.css" type="text/css" rel="stylesheet">
</head>

<body>
  <div class="topnav">
    <a href="#">Home</a>
    <a href="#">temp</a>
    <a href="#">temp</a>
    <a href="#">temp</a>
  </div>

  <div class="topimage">
    <img src="/users/grecko/desktop/back.png" alt="topimage" class="main-image-front">
  </div>

  <div class="middlebar">

  </div>

  <div class="maincontent">
    <div class="maincontent-about infotexta">
      <h1>placeholder</h1>
      <p>your text hereyour text here<br>your text hereyour text here<br>your text hereyour text here<br>your text hereyour text here</p>
    </div>
  </div>
<body>

编辑：JSFiddle显示图像的替代文字，因为我忘记了我的电脑上有图像，但你仍然可以看到该行。

感谢

Answer 1

显示黄色条形图，因为它内部有图像。

如果您想在以下蓝条中叠加图片，可以将.topimage设为position:absolute

＆＃13;

body {
	padding: 0;
	margin: 0;
	background-color: #fff9e8;
}

.topnav {
    background-color: #edeff2;
    overflow: hidden;
	  border-top: 1px solid black;
	  border-bottom: 1px solid black;
	  width: 100%;
	  padding: 0;
}

.topnav a {
    float: left;
    display: block;
    color: black;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
	  font-family: 'Fresca', sans-serif;
	
}

.topnav a:hover {
    background-color: #ddd;
    color: black;
}

.topnav a.active {
    background-color: #4CAF50;
    color: white;
}

.maincontent {
	width: 1000px;
	margin:0 auto;
	background-color: #fff;
	padding-top: 25px;
}

.infotexta {
	text-align: center;
}

img {
	background-color: #fff;
	margin: 0;
	padding: 0;
}

.middlebar {
	height: 50px;
	border-top: 1px solid black;
	border-bottom: 1px solid black;
	width: 100%;
	background-color: #edeff2;
	padding: 0;
	margin: 0;
}

.main-image-front {
	padding: 0;
	margin: 0;
	width: 100%;
	height: 400px;
}
.topimage {
  position:absolute;
 }

＆＃13;

<!DOCTYPE html>

<html>
  <head>
	<title>placeholder</title>	
	<!-- css -->
	<link href="mainstyle.css" type="text/css" rel="stylesheet">
  </head>
	
  <body>
	<div class="topnav">
	  <a href="#">Home</a>
	  <a href="#">temp</a>
	  <a href="#">temp</a>
	  <a href="#">temp</a>
	</div>
	
	<div class="topimage">
	  <img src="/users/grecko/desktop/back.png" alt="topimage" class="main-image-front">
	</div>
	
	<div class="middlebar">
	
	</div>
			
	<div class="maincontent">
	  <div class="maincontent-about infotexta">
	  <h1>placeholder</h1>
	  <p>your text hereyour text here<br>your text hereyour text here<br>your text hereyour text here<br>your text hereyour text here</p>
	</div>

＆＃13;

这样可以在不显示黄色条的情况下显示图像。

Answer 2

在图像上设置高度，然后在容器上设置相同的高度。
https://jsfiddle.net/o4r87q9u/3/

.topimage img {
  height: 200px;
}

.topimage {
  height: 200px;
}

<强>之前

<强>后

为什么我的div之间有一个随机的栏

2 个答案: