イメージの横にヘッダーと段落を整列する方法

Question

イメージを左側に、ヘッダーを上部に置き、ヘッダーの下に段落を入れたいとします。

例：私は今持っているLink

コード：

.code { 
 
\t margin-left: 10%; 
 
\t clear: left; 
 
\t margin-bottom: 100px; 
 
} 
 

 
.code h1 { 
 
\t font-size: 25px; 
 
\t font-family: 'Kurale', serif; 
 
\t font-weight: bold; 
 
\t vertical-align: top; 
 
\t margin-left: 20px; 
 
\t display:inline-block; 
 
} 
 

 
.code p { 
 
\t font-family: 'Spectral', serif; 
 
\t vertical-align: middle; 
 
} 
 

 
.code img { 
 
\t display: inline-block; 
 
}

<div class="code"> 
 
<img src="code.jpg" style="width: 100px; height: 100px; border-radius:15%; overflow:hidden;"> 
 
<h1>Website Development:</h1> 
 
<p>We do stuff</p> 
 
</div> 
 
<div class="code"> 
 
<img src="game.jpg" style="width: 100px; height: 100px; border-radius:15%; overflow:hidden;"> 
 
<h1>Game Development</h1> 
 
</div>

Answer 1

マークアップを変更することなく、必要なイメージにfloat: leftを追加することです。

あなたの画像新しいコードは次のようになります。

.code { 
 
    margin-left: 10%; 
 
    clear: left; 
 
    margin-bottom: 100px; 
 
} 
 

 
.code img { 
 
    width: 100px; 
 
    height: 100px; 
 
    border-radius: 15%; 
 
    overflow: hidden; 
 
    float: left; 
 
} 
 

 
.code h1 { 
 
    font-size: 25px; 
 
    font-family: 'Kurale', serif; 
 
    font-weight: bold; 
 
    vertical-align: top; 
 
    margin-left: 20px; 
 
    display: inline-block; 
 
} 
 

 
.code p { 
 
    font-family: 'Spectral', serif; 
 
    vertical-align: middle; 
 
}

<div class="code"> 
 
    <img src="code.jpg"> 
 
    <h1>Website Development:</h1> 
 
    <p>We do stuff</p> 
 
</div> 
 
<div class="code"> 
 
    <img src="game.jpg"> 
 
    <h1>Game Development</h1> 
 
</div>

Answer 2

それは本当にあなたの左または右の列が長いですが、あなたがしようとしているように見えたときに何をしたい動作に依存します... 2つのCOLSとテーブルの振る舞いを持って

.container { 
 
    display:table ; 
 
} 
 

 
.code { 
 
    display:table-row ; 
 
} 
 

 
.code .left, 
 
.code .right{ 
 
display:table-cell ; 
 
vertical-align:top ; 
 
} 
 

 
.code .left { width:100px ; } 
 

 
.left img { width:100px ; height:100px ; background:blue ; }

<div class="container"> 
 
    <div class="code"> 
 
    <div class="left"> 
 
     <img src="code.jpg"> 
 
    </div> 
 
    <div class="right"> 
 
     <h1>Website Development:</h1> 
 
     <p>We do stuff</p> 
 
    </div> 
 
    </div> 
 
    <div class="code"> 
 
    <div class="left"> 
 
     <img src="game.jpg"> 
 
    </div> 
 
    <div class="right"> 
 
     <h1>Game Development</h1> 
 
     <p>We do stuff</p> 
 
     <p>We do stuff</p> 
 
     <p>We do stuff</p> 
 
     <p>We do stuff</p> 
 
    </div> 
 
    </div> 
 
</div>