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

您的代码中的dp22 之间有<div>个随机标记。他们看起来有点像这样：

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

删除它们或在CSS中包含以下代码：

p {
   display: none;
}

如果您在其他地方实际使用标记，则可能会导致其他问题。

Answer 2

这些元素之间有空标记 - 它们实际上有评论..

enter image description here

删除之间的dp22元素，您的问题就解决了。

由于您上面的编码没有证明这一点，我将假设wordpress正在生成这些代码。我建议删除HTML中所有不必要的间距。

一个框内的CSS WordPress框

2 个答案: