Question

我需要在两行之间留出一些空间。当我使用<br/>时没有任何反应，如果我使用填充，则没有任何反应。如果我不在div中使用块样式，则只有文本向下移动填充和br。图像不会移动。

<h1>The Team</h1>
    <style type="text/css">
        .photo {
            padding-right: 5%;
            width: 20%;
            float: left;
        }
       .intro {
            width: 60%;
            float: right;
            padding-right: 10%;
            padding-bottom: 0px;
       }
       .name {
            font-family: 'Open Sans', sans-serif;
            font-size: 14px;
            font-weight: bold;
            line-height: 0px;
            padding-top: 0px;
            color: #000000;
            padding-bottom: 0px;
            text-transform: uppercase;
       }
       .introduction {
            font-family: 'Open Sans', sans-serif;
            font-size: 14px;
            padding-bottom: 20px;
            font-weight: regular;
            line-height: 20px;
            color: #000000;
       }
       .italics {
            font-family: 'Open Sans', sans-serif;
            font-size: 14px;
            font-style: italic;
            line-height: 0px;
            padding-top: 0px;
            padding-bottom: 0px;
            line-height: 0px;
            color: #000000;
      }
      td {
          padding: 0px;
      }
      tr {
          padding=bottom: 40px;
      }
</style>

<div display="block">
   <div display="block">
      <img class="photo" alt="Taxeeta, Founder and CTO" src="http://localhost/taxeeta/wp-content/uploads/2013/09/dummy-picture1.png" />
   </div>
   <div class="intro" display="inline">
      <h4 class="name">Siddharth</h4>
      <h4 class="italics">Founder, CTO</h4>
      <h4 class="introduction">Having invested bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla .</h4>
   </div>
</div>
<br/>
<div display="block">
    <div display="block">
       <img class="photo" alt="Taxeeta, Mentor" src="http://localhost/taxeeta/wp-content/uploads/2013/09/dummy-picture1.png"/>
    </div>
    <div class="intro" display="inline">
       <h4 class="name">Zubin</h4>
       <h4 class="italics">Advisor</h4>
       <h4 class="introduction">Zubin is a bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla .</h4>
    </div>
</div>

截至目前，它如下所示： Taxeeta web page, the team

Answer 1

你的HTML中的哪些地方和标签？

 padding-botom

是正确的使用方式。不是

 padding=bottom

。尝试使用此CODE

    .photo {
       padding-right: 0%; width:30%;  float: left;
       padding-top:20%;
       height:50% 
    }

注意：使用br标记行间距是一个坏习惯。

Answer 2

<div display="block">

为此添加ID或类并使用css

id/class
{
 padding:10px;
}

Answer 3

为课堂照片设置上边距

.photo {
padding-right: 5%; width:20%;  float: left; margin-bottom:40px;
}

作为演示：http://jsfiddle.net/parslook/Msxmp/

Answer 4

我为你创造了一个小提琴。 http://jsfiddle.net/RL4q9/2/ 看看这个。

   .photo
   {
     padding-right: 0%; float: left;width:100px;
     padding-top:20%;;
   }

我希望你能实现这一目标。请投票。

Answer 5

你的问题是你的花车。 Float将元素从正常的文档流中取出。

为你的“staff”div添加一个类，并使用它来清除浮动。

<强> HTML

<div class="staff">    
    <img class="photo" alt="Taxeeta, Founder and CTO" src="http://placehold.it/350x350" />    
    <div class="intro" >
        <h4 class="name">Siddharth</h4>      
        <h4 class="italics">Founder, CTO</h4>
        <div class="introduction">Having invested bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla .</div>
    </div>
</div>

<div class="staff">
    <img class="photo" alt="Taxeeta, Mentor" src="http://placehold.it/350x350" />    
    <div class="intro">
    <h4 class="name">Zubin</h4>
    <h4 class="italics">Advisor</h4>
    <div class="introduction">Zubin is a bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla .</div>
    </div>
</div>

<强> CSS

.staff
{
margin-bottom:10px;
clear:both;}

.photo {
    padding-right: 5%;
    width:20%;
    float:left;
}
.intro {
    width: 60%;
    padding-right: 10%;
    padding-bottom:0px;
}

现在你可以在包含div的底部放一个边距。

看到这个小提琴：http://jsfiddle.net/2rj9u/1/

您可能也不想使用display:inline-block代替浮点数http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/。

另外，请注意不要将h4之类的元素用于样式目的。

无法在2行之间获得空间

5 个答案: