0

我在使用 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>

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

4

2 回答 2

1

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

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

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

p {
   display: none;
}

尽管如果您实际上在其他地方使用<p>标签，这可能会导致其他问题。

于 2013-09-18T00:21:37.247 回答
0

您在这些元素之间有空<p>标签 - 它们实际上有评论......

在此处输入图像描述

删除<p>之间的元素dp22，你的问题就解决了。

因为您上面的编码没有证明这一点，我将假设 wordpress 正在生成这些<p>标签。我建议删除 HTML 中所有不必要的间距。

于 2013-09-18T00:22:11.080 回答