Question

我坚持这个，因为下面带有id“img-section”的div在我的css文件中无法正常工作。出于某种原因，CSS样式不适用于＃img-section，而是＃bottom-section包含imgs的整个部分，我无法独立更改div中的任何底部部分。

这是我的html和CSS，奇怪的是通过在img部分的顶部和标题部分的另一个边框的正下方设置边框。我希望这个边框出现在img部分的底部，但没有运气。

<html>
<head>
    <title>hello</title>
    <meta charset = "utf-8" />
    <style type="text/css">

  img {
    width:30%;
    float:left;
    margin: 1.66%
  }

  #title-section {

    font-family:serif;
    font-size:15px;
    text-align:center;
    text-transform:lowercase;
    margin-left:1.66%;
    margin-bottom:10px;
    border-bottom:7px solid black;
    border-top:7px solid black;
    width:96.68%;

      }

/*  hr {border-top:7px solid black;
    width:96.68%;
    margin-left:1.66%;

  }*/

  #bottom-section {
    border-top:7px solid black;
    width:96.68%;
    margin-left:1.66%;
  }


</style>

</head>

<body>
<div id="title-section">
  <h1 >h e l l o</h1>

  <h3 ><ins>[ ma - own - compilation - of - all - things - cool ]</ins></h3>

  <h4>by Mimicat</h4>
</div>

<div id="img-section">
   <img src="http://cdn.shopify.com/s/files/1/0698/9609/files/PSNY_RUNWAY_04_1024x1024.jpg?1060797035744706564" >
   <img src="http://cdn.shopify.com/s/files/1/0698/9609/files/PSNY_RUNWAY_03_1024x1024.jpg?4506725020023455500" >
   <img src="http://cdn.shopify.com/s/files/1/0698/9609/files/PSNY_RUNWAY_05_1024x1024.jpg?3752376622799079790" >
     <img src="http://cdn.shopify.com/s/files/1/0698/9609/files/PSNY_RUNWAY_04_1024x1024.jpg?1060797035744706564" >
   <img src="http://cdn.shopify.com/s/files/1/0698/9609/files/PSNY_RUNWAY_03_1024x1024.jpg?4506725020023455500" >
   <img src="http://cdn.shopify.com/s/files/1/0698/9609/files/PSNY_RUNWAY_05_1024x1024.jpg?3752376622799079790" >
     <img src="http://cdn.shopify.com/s/files/1/0698/9609/files/PSNY_RUNWAY_04_1024x1024.jpg?1060797035744706564" >
   <img src="http://cdn.shopify.com/s/files/1/0698/9609/files/PSNY_RUNWAY_03_1024x1024.jpg?4506725020023455500" >
   <img src="http://cdn.shopify.com/s/files/1/0698/9609/files/PSNY_RUNWAY_05_1024x1024.jpg?3752376622799079790" >
</div>


  <div id="bottom-section">
      <form>
          <p><strong>Did you enjoy this collection?</strong></p>
          <p>Hell yeah! <input type="checkbox" checked> Nah - <input type="checkbox"> </p>
          <p><input type="submit"></p>
      </form>
  </div>
</body>
</html>

我的代码有什么问题？我该如何解决这个问题？我想在图像下方或div＃bottom-section的顶部制作边框，但是当我将border-top放在＃bottom-section内部时，它会在div＃title-section的正下方创建一个边框，然后驱动它我疯了有什么建议？谢谢！

Answer 1

问题是#img-section的所有子元素都已浮动，因此#img-section没有高度。要解决此问题，您需要所谓的＆＃34; clearfix＆＃34; some examples here。代码的工作示例here

Answer 2

您是否尝试过使用：

<div class="img-section">

而不是id？然后在css：

.img-section{
}

另外，你有你的CSS副本吗？我们可以看看那里是否有任何不寻常的事情发生。

Answer 3

您的图片浮动，因此您需要/需要清除其容器。

.clearfix:after {
    content:"";
    display:block;
    clear:both;
}

#title-section {
  font-family: serif;
  font-size: 15px;
  text-align: center;
  text-transform: lowercase;
  margin-left: 1.66%;
  margin-bottom: 10px;
  border-bottom: 7px solid black;
  border-top: 7px solid black;
  width: 96.68%;
}

img {
  width: 30%;
  float: left;
  margin: 1.66%
}

#bottom-section {
  border-top: 7px solid black;
  width: 96.68%;
  margin-left: 1.66%;
}

<div id="title-section">
  <h1>h e l l o</h1>
  <h3>
    <ins>[ ma - own - compilation - of - all - things - cool ]</ins>
  </h3>
  <h4>by Mimicat</h4>
</div>

<div id="img-section" class="clearfix">
  <img src="http://cdn.shopify.com/s/files/1/0698/9609/files/PSNY_RUNWAY_04_1024x1024.jpg?1060797035744706564">
  <img src="http://cdn.shopify.com/s/files/1/0698/9609/files/PSNY_RUNWAY_03_1024x1024.jpg?4506725020023455500">
  <img src="http://cdn.shopify.com/s/files/1/0698/9609/files/PSNY_RUNWAY_05_1024x1024.jpg?3752376622799079790">
  <img src="http://cdn.shopify.com/s/files/1/0698/9609/files/PSNY_RUNWAY_04_1024x1024.jpg?1060797035744706564">
  <img src="http://cdn.shopify.com/s/files/1/0698/9609/files/PSNY_RUNWAY_03_1024x1024.jpg?4506725020023455500">
  <img src="http://cdn.shopify.com/s/files/1/0698/9609/files/PSNY_RUNWAY_05_1024x1024.jpg?3752376622799079790">
  <img src="http://cdn.shopify.com/s/files/1/0698/9609/files/PSNY_RUNWAY_04_1024x1024.jpg?1060797035744706564">
  <img src="http://cdn.shopify.com/s/files/1/0698/9609/files/PSNY_RUNWAY_03_1024x1024.jpg?4506725020023455500">
  <img src="http://cdn.shopify.com/s/files/1/0698/9609/files/PSNY_RUNWAY_05_1024x1024.jpg?3752376622799079790">
</div>


<div id="bottom-section">
  <form>
    <p><strong>Did you enjoy this collection?</strong>
    </p>
    <p>Hell yeah!
      <input type="checkbox" checked>Nah -
      <input type="checkbox">
    </p>
    <p>
      <input type="submit">
    </p>
  </form>
</div>

Answer 4

在这两个部分之间使用<hr>。您可以更改其样式并使用它：

<hr style="margin:8px auto">

CSS文件中的某些div无法正常显示

4 个答案: