0

2行の間にスペースが必要です。パディングを使用して<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 ページ、チーム

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

クラス写真の余白を下に設定

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

デモとして: http://jsfiddle.net/parslook/Msxmp/

于 2013-09-11T05:41:27.347 に答える
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-blockfloat の代わりに使用することも見たくないかもしれません: http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/ .

h4余談ですが、純粋にスタイリング目的でのような要素を使用しないでください。

于 2013-09-11T06:04:51.253 に答える
1 
<div display="block">

これにIDまたはクラスを追加し、cssを使用します

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

私はあなたのためにフィドルを作成しました。http://jsfiddle.net/RL4q9/2/ これを見てください。

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

これを達成したいと願っています。投票してください。

于 2013-09-11T05:45:29.160 に答える