html - 2 つの行の間にスペースを確保できません

Question

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 ページ、チーム

score 2 · Accepted Answer

HTML のどこにとタグがありますか?

パディングボトム

が正しい使い方です。いいえ

パディング=底

. このコードを使用してみてください

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

注: 行間のために br タグを使用するのは悪い習慣です。

score 1 · Accepted Answer

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

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

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

score 1 · Accepted Answer

あなたの問題はあなたのフロートです。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余談ですが、純粋にスタイリング目的でのような要素を使用しないでください。

score 1 · Accepted Answer

<div display="block">

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

id/class
{
 padding:10px;
}

score 1 · Accepted Answer

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

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

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

html - 2 つの行の間にスペースを確保できません

5 に答える 5

Related

Reference