0

我需要两行之间的一些空间。当我使用<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 网页，团队

4

5 回答 5

2

您的 html 中的 和 标签在哪里？

填充底部
是正确的使用方法。不是
填充=底部
. 尝试使用此代码

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

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

于 2013-09-11T05:46:25.477 回答
1 
<div display="block">

为此添加一个 id 或类并使用 css

id/class
{
 padding:10px;
}
于 2013-09-11T05:30:25.023 回答
1

为班级照片设置边缘底部

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

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

于 2013-09-11T05:41:27.347 回答
1

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

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

我希望你想实现这一点。请投票。

于 2013-09-11T05:45:29.160 回答
1

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

为您的“员工” 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纯粹用于样式目的的元素。

于 2013-09-11T06:04:51.253 回答