个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-28 03:23:48 25 4
gpt4 key购买 nike

所以我不知道为什么这个栏在这里:

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 显示图像的替代文本，因为我忘记了我的电脑上有图像，但您仍然可以看到该行。

谢谢

最佳答案

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

.topimage img {
  height: 200px;
}

.topimage {
  height: 200px;
}

之前 before

之后 after

关于html - 为什么我的 div 之间有一个随机栏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45091216/

25 4 0
文章推荐： c++ - 显式模板实例化在 XLC 上产生编译错误，但在其他编译器上有效
文章推荐： javascript - vue倒计时器无限循环
文章推荐： javascript - firebase (Javascript) onMessage 未触发
文章推荐： javascript - 在 v-text-field 或 v-textarea vuetify Vue.js 中显示实时建议词