盒子内的 CSS WordPress 盒子

Question

我在使用 WordPress 时遇到问题，在盒子中嵌套盒子。在 WordPress 之外，这工作正常。我确定只有一两个参数有误。

外框为dp23，内框为dp22由于某种原因，内框 (dp22) 之间存在间距。你可以在这里看到问题:http://4tepiano.com/recommended-piano-books-2/

CSS 代码:

 .dp101
 {
 float:left; 
 width:100%; 
 border:1px solid green;
 display: inline;
 clear: both;
 margin:auto;
 } 

 .dp75 {
 width:84%;
 border-color:gray;
 border-style:solid;
 border-width:1px;
 overflow:auto;
 float: right;
 text- align:left;
 padding:10px;
 }

 .dp22 {
  border:1px solid red;
  HEIGHT: 1.2em;
  margin:1px;
  padding:1px;
  font-size: .8em;
  overflow:auto;
  display: block;
  }
  .dp23 {
  width:12%;
  border:1px solid green;
  float:left;
  margin:1px;
  padding:1px;
  }
    [edited]
  .dp23 p {
  display: none;
  }

HTML代码:

 <div class="dp101" style="BACKGROUND-COLOR: #fdfcdc">
  <div class="dp23" style="HEIGHT: 150px";><!--Left Column-->
  <!--category--> <div class="dp22">        category                 </div>
  <!--Title-->   <div class="dp22" >    Title                   </div>
  <!--Author-->  <div class="dp22" >    Author                     </div>
 <!--Price-->   <div class="dp22">   Price                      </div>
 <!--Link-->    <div class="dp22"> Amazon Link       </div>
 <!--Cover-->   <div class="dp22" style= "HEIGHT: 85px"; >                      Cover                   </div>

 </div>           <!--End-Left Column-->

                 <!--Right Column-->
 <div class="dp75"style="HEIGHT: 150px"; >             

     Work in progress. 
        </div> <!--End-Right Column-->

 <div class="dp75" style="HEIGHT: 10px";> <!--Right spacer--> </div>

我使用了边框以使其易于查看。箱子应该堆叠在一起，边缘相互接触。

Answer 1

你有随机的<p> dp22 <div> 之间代码中的标签秒。它们看起来有点像这样:

<p>
   <!--Author-->
</p>

删除它们或在您的 CSS 中包含以下代码:

p {
   display: none;
}

尽管如果您实际使用 <p> 可能会导致其他问题在别处标记。