DIV类错误

时间：2016-09-21 23:37:53

标签： javascript jquery html css

所以，我试图为我的tumblr创建一个常见问题解答页面，我希望每个问题/答案都有相同大小的框，字体和图标，所以我正在使用课程，我很难用文字，但我终于设法得到它！问题是，图标。我一直在努力让它重复并均匀定位？ （比如文字中它太高了，但是我只是无法弄明白）。我尝试过保证金定位，头寸：绝对;并且漂浮但似乎没什么可锻炼的。

＆＃13;
＆＃13; 
body{
    background-color: #fff;
    margin: auto;
    }
    
    #container{
        background-color: #000;
        width: 700px;
        height: 900px;
        padding: 20px;
        margin-top: 20px;
        margin-left: 480px;
        }
    
    
    
  #mainbox1{
      width: 675px;
      height: 100px;
      background-color: #ffffff;
      padding: 20px;
      margin-top: -8px;
      margin-left: -8px;
      
  }  
  
  
  #iconone{
      width: 130px;
      height: 130px;
      background-color: #D4A190;
      margin-top: -15px;
      margin-left: -15px;
     
  }
    
    #minidescription{
        width: 450px;
        height: 120px;
        background-color: #D4A190;
        margin-top: -130px;
      margin-left: 120px;
      padding: 5px;
      text-align: center;
      font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
	font-size: 12px;
	font-style: normal;
	font-variant: normal;
     line-height: 20px;
     word-spacing: 2px;
      
    }
    
    
    #linkguide{
        width: 105px;
        height: 130px;
        background-color: #C390D4;
    margin-top: -130px;
      margin-left: 585px;
        
    }
    
    #navigation {
  width: 105px;  
  line-height: 14px;
}


#navigation a:link, #navigation a:visited, #navigation a:active {
  display: block;
  font: 7px  "small fonts", "century gothic";
  text-transform: uppercase; 
  text-decoration: none; 
  letter-spacing: 2px; 
  background-color: #111;
  color: #fff; 
  padding: 7px 3px;
  -webkit-transition: all .5s ease-out;
  -moz-transition: all .5s ease-out;
  -o-transition: all .5s ease-out;
  -ms-transition: all .5s ease-out;
  transition: all .5s ease-out;
}

#navigation a:hover {
  background-color: #8CC21F;
  color: #000;
  padding: 7px 9px;
}
    
.question{
     width: 705px;
      height: 50px;
      background-color: #A1D490;
          margin-left: -8px;
          margin-top: 10px;
          padding: 5px;
}

.questionicon{
     background-image: url("http://i66.tinypic.com/2u5qhe8.png");
     width: 16px;
     height: 16px;
     position: absolute;
     top: 200px;
     left: 510px;
    }
    
    
    
    .answer{
        background-color: #90C3D4;
         width: 705px;
      height: 50px;
      margin-left: -8px;
          margin-top: 10px;
          padding: 5px;
    }
    
    
    .answericon{
     background-image: url("http://i65.tinypic.com/qod4kx.png");
     width: 16px;
     height: 16px;
     position: absolute;
     top: 260px;
     left: 510px;
    }
    
    p.center {
  text-align: center;
    font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
 font-size: 12px;
 font-style: normal;
 font-variant: normal;
     word-spacing: 2px;
   
}
＆＃13; 
<head>
    <link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
</head>
<body>
    
  <div id="container">
      
      <div id="mainbox1">
          
          <div id="iconone"><IMG SRC="http://i67.tinypic.com/vhxls9.png" ALT="icon"></div>
          
          <div id="minidescription">ellentesque non semper leo. Aliquam eu ultricies tellus. Ut rutrum fringilla rhoncus. Vestibulum bibendum quam at orci bibendum placerat. Etiam lectus nisl, ullamcorper ac aliquam vitae, efficitur eu mauris. Suspendisse porttitor euismod tempus. Quisque eleifend nulla vel auctor dictum. Ut posuere condimentum odio. Aliquam erat volutpat. Sed in laoreet odio. Mauris quis feugiat dolor.</div>
          
          
          <div id="linkguide">
    <div id="navigation">
    <a href="http://google.com">Link 1</a><br>
    <a href="http://yahoo.com">Link 2</a><br>
    <a href="http://bing.com">Link 3</a><br>
    <a href="http://bing.com">Link 4</a><br>
      
</div>


          </div>
      </div>
      
      <!-- Question One -->
      
      <div class="question"><div class="questionicon"></div>
      <p class="center">This paragraph will be red and center-aligned.</p>
          </div>
      
      <div class="answer"><div class="answericon"</div></div>
       <p class="center">This paragraph will be red and center-aligned.</p>    
       </div>
       
<!-- Question two -->

       <div class="question"><div class="questionicon"></div>
      <p class="center">This paragraph will be red and center-aligned.</p>
          </div>
      
      <div class="answer"><div class="answericon"</div></div>
       <p class="center">This paragraph will be red and center-aligned.</p>    
       </div>
      
  </div>  
    
    
    
</body>
＆＃13;
＆＃13;
＆＃13;

您可以找到完整/原始视图here

4 个答案:

答案 0 :(得分：1)

我刚用你的代码制作了这个fiddle。看一看。
这是我改变的：

.question {
  width: 705px;
  height: 50px;
  background-color: #A1D490;
  margin-top: 10px;
  position: relative;
  display: flex;
  justify-content: center; 
}
.questionicon {
   background-image: url("http://i66.tinypic.com/2u5qhe8.png");
   width: 16px;
   height: 16px;
   position: absolute;
   left: 32px;
   top: 16px;
}
.answer {
  background-color: #90C3D4;
  width: 705px;
  height: 50px;
  margin-top: 10px;
  position: relative;
  display: flex;
  justify-content: center;
}
.answericon {
   background-image: url("http://i65.tinypic.com/qod4kx.png");
   width: 16px;
   height: 16px;
   position: absolute;
   left: 32px;
   top: 16px;
}

我使用position: relative和display: flex修复了布局。

在元素上设置position: relative时，position: absolute的任何子元素都将相对于它定位。

有关display: flex工作原理的精彩指南和示例，请查看css-tricks: guide to flex box。这对垂直和/或水平居中的元素非常有用。

答案 1 :(得分：0)

首先......

绝对位置将您的图标从父div的流程中完全取出..而不是您想要的。你所有的顶部/左边都不知道你的图标消失了。

尝试相对定位。我已经包含了一个css样本供您使用。我希望这有帮助

.questionicon {
 background-image: url(http://i66.tinypic.com/2u5qhe8.png);
 width: 16px;
 height: 16px;
 position: relative;
 top: 11px;
 left: 210px;
 float: left;
    }

enter image description here

答案 2 :(得分：0)

看看我的代码片段，我以更易于管理的方式重新组织了您的HTML，并为更广泛的/[\w\s\-\(\)\!\,\.]{3,45}/课程调整了CSS，这样可以更轻松地调整所有这些图标

＆＃13;
＆＃13; 
.icon
＆＃13; 
body {
  background-color: #fff;
  margin: auto;
}

#container {
  background-color: #000;
  width: 700px;
  height: 900px;
  padding: 20px;
  margin-top: 20px;
  margin-left: 480px;
}

#mainbox1 {
  width: 675px;
  height: 100px;
  background-color: #ffffff;
  padding: 20px;
  margin-top: -8px;
  margin-left: -8px;
}

#iconone {
  width: 130px;
  height: 130px;
  background-color: #D4A190;
  margin-top: -15px;
  margin-left: -15px;
}

#minidescription {
  width: 450px;
  height: 120px;
  background-color: #D4A190;
  margin-top: -130px;
  margin-left: 120px;
  padding: 5px;
  text-align: center;
  font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
  font-size: 12px;
  font-style: normal;
  font-variant: normal;
  line-height: 20px;
  word-spacing: 2px;
}

#linkguide {
  width: 105px;
  height: 130px;
  background-color: #C390D4;
  margin-top: -130px;
  margin-left: 585px;
}

#navigation {
  width: 105px;
  line-height: 14px;
}

#navigation a:link,
#navigation a:visited,
#navigation a:active {
  display: block;
  font: 7px "small fonts", "century gothic";
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 2px;
  background-color: #111;
  color: #fff;
  padding: 7px 3px;
  -webkit-transition: all .5s ease-out;
  -moz-transition: all .5s ease-out;
  -o-transition: all .5s ease-out;
  -ms-transition: all .5s ease-out;
  transition: all .5s ease-out;
}

#navigation a:hover {
  background-color: #8CC21F;
  color: #000;
  padding: 7px 9px;
}

.question {
  width: 705px;
  height: 50px;
  background-color: #A1D490;
  margin-left: -8px;
  margin-top: 10px;
  padding: 5px;
}

.icon {
  margin: 16px 0 0 16px;
  float:left;
}

.answer {
  background-color: #90C3D4;
  width: 705px;
  height: 50px;
  margin-left: -8px;
  margin-top: 10px;
  padding: 5px;
}

.answericon {

  width: 16px;
  height: 16px;
  position: absolute;
  top: 260px;
  left: 510px;
}

p.center {
  text-align: center;
  font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
  font-size: 12px;
  font-style: normal;
  font-variant: normal;
  word-spacing: 2px;
}
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：0)

@Serenity

我注意到您可能正在尝试使用FontAwesome图标库，但没有设置文件的路径。我请求CDN并将该脚本包含在此处的代码中，以便您可以使用所有字体 - 真棒图标。你的最后一个Q＆amp; A div也在你的主要容器之外，看起来不在帧中我把它们移回了。

＆＃13;
＆＃13; 
body{
    background-color: #fff;
    margin: auto;
    }
#container{
        background-color: #000;
        width: 700px;
        height: 900px;
        padding: 20px;
        margin-top: 20px;
        margin-left: 480px;
        }
#mainbox1{
      width: 675px;
      height: 100px;
      background-color: #ffffff;
      padding: 20px;
      margin-top: -8px;
      margin-left: -8px;
}  
#iconone{
      width: 130px;
      height: 130px;
      background-color: #D4A190;
      margin-top: -15px;
      margin-left: -15px;
}
#minidescription{
        width: 450px;
        height: 120px;
        background-color: #D4A190;
        margin-top: -130px;
      margin-left: 120px;
      padding: 5px;
      text-align: center;
      font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
	font-size: 12px;
	font-style: normal;
	font-variant: normal;
     line-height: 20px;
     word-spacing: 2px;
}
#linkguide{
        width: 105px;
        height: 130px;
        background-color: #C390D4;
    margin-top: -130px;
      margin-left: 585px;
}
#navigation {
  width: 105px;  
  line-height: 14px;
}
#navigation a:link, #navigation a:visited, #navigation a:active {
  display: block;
  font: 7px  "small fonts", "century gothic";
  text-transform: uppercase; 
  text-decoration: none; 
  letter-spacing: 2px; 
  background-color: #111;
  color: #fff; 
  padding: 7px 3px;
  -webkit-transition: all .5s ease-out;
  -moz-transition: all .5s ease-out;
  -o-transition: all .5s ease-out;
  -ms-transition: all .5s ease-out;
  transition: all .5s ease-out;
}
#navigation a:hover {
  background-color: #8CC21F;
  color: #000;
  padding: 7px 9px;
}
.question{
     width: 705px;
      height: 50px;
      background-color: #A1D490;
          margin-left: -8px;
          margin-top: 10px;
          padding: 5px;
}
.questionicon{
     background-image: url("http://i66.tinypic.com/2u5qhe8.png");
     width: 16px;
     height: 16px;
     position: absolute;
     top: 200px;
     left: 510px;
    }
.answer{
        background-color: #90C3D4;
         width: 705px;
      height: 50px;
      margin-left: -8px;
          margin-top: 10px;
          padding: 5px;
    }
.answericon{
     background-image: url("http://i65.tinypic.com/qod4kx.png");
     width: 16px;
     height: 16px;
     position: relative;
     top: 260px;
     left: 510px;
	}
    
    p.center {
  text-align: center;
    font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
 font-size: 12px;
 font-style: normal;
 font-variant: normal;
     word-spacing: 2px;
   
}
＆＃13; 
<head>
<script src="https://use.fontawesome.com/4eb62e4ca1.js"></script>
</head>
<body>
<div id="container">
<div id="mainbox1">
<div id="iconone"><IMG SRC="http://i67.tinypic.com/vhxls9.png" ALT="icon"></div>
<div id="minidescription">ellentesque non semper leo. Aliquam eu ultricies tellus. Ut rutrum fringilla rhoncus. Vestibulum bibendum quam at orci bibendum placerat. Etiam lectus nisl, ullamcorper ac aliquam vitae, efficitur eu mauris. Suspendisse porttitor euismod tempus. Quisque eleifend nulla vel auctor dictum. Ut posuere condimentum odio. Aliquam erat volutpat. Sed in laoreet odio. Mauris quis feugiat dolor.</div>
<div id="linkguide">
<div id="navigation">
<a href="http://google.com">Link 1</a><br>
<a href="http://yahoo.com">Link 2</a><br>
<a href="http://bing.com">Link 3</a><br>
<a href="http://bing.com">Link 4</a><br>
</div>
</div>
</div>
      
<!-- Question One -->
<div class="question">
	<i class="fa fa-question-circle-o"></i>
	<p class="center">This paragraph will be red and center-aligned.</p>
</div>
<div class="answer">
	<i class="fa fa-exclamation-circle" aria-hidden="true"></i>
</div>
<!-- Question Two -->
<div class="question">
	<i class="fa fa-question-circle-o"></i>
	<p class="center">This paragraph will be red and center-aligned.</p>
</div>
<div class="answer">
	<i class="fa fa-exclamation-circle" aria-hidden="true"></i>
</div>

<!--Add More Questions Above this comment-->
</div> 
</body>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题