どのようにこれらの2つの座って座って作る？

重複した質問を申し訳ありません。関連する以前の投稿を検索しました.DIVに「float：left」を追加したり、「display：inline-block」を追加したりしました。どのようにこれらの2つの座って座って作る？

私は何を達成したいことは、このようなものである

：私は上の画像と同じ結果を達成するために、いくつかのマージン/パディングを追加することができますがView post on imgur.com

が、私はそれはのブラウザはこのように動作しませんサイズを変更応答性がなければなりません。助けてくれませんか？

<style> 
body { 
width: 100%; 
} 

.wrapper { 
width: 80%; 
display: inline-block; 
} 

.order { 
float: left; 
} 

.content { 
width: 80%; 
display: inline-block; 
} 
</style> 

<body> 
<div class="wrapper"> 
    <div class="order">01/</div> 
    <div class="content"> 
     <h2 class='subject'>HERE IS THE SUBJECT</h2> 
     <p>oiwjefoj wefojiwe fjoiwefj woj wefojiwef wefjoiwef wjoeifjow ejowefjoi wfjowefjio wefnoiwjefohwf</p> 
    </div> 
</div> 
</body>

出典

2016-08-12 Kenny

ラッパーの幅は100％にする必要があります。コンテンツのオーダの幅を20％と80％に設定し、それぞれにインラインブロックを追加します。 –

使用

.order { 
    float: left; 
    width: 20%; 
    text-align: center; 
}

とテキストのサイズを変更し、テキストの書式を設定するテキストにマージントップを与えます。

出典

2016-08-12 05:32:31

ありがとうございましたSuresh、私はちょうどあなたが提案したものを試しました、20％の1つのdivともう1つは80％のために、私はそれにボックスサイズのものを適用しましたが、今は "01 /"は、私はImgurに写真を載せました。一度見てみましょうか？ http://imgur.com/a/oBXgT – Kenny

ラッパーにwidth:100%とし、コンテンツのオーダー幅を20％、コンテンツの80％に設定し、それぞれにインラインブロックを追加します。このフィドルを見てください。 https://jsfiddle.net/cs4tspc0/

出典

2016-08-12 05:32:32

謝辞ネルソン、私はあなたがJS Fiddleに書いたコードをチェックしましたが、今は "01 /"が左上隅にあります。私はImgur、http://imgur.com/a/oBXgTに写真を掲載しました。見てみましょうか？ – Kenny

余白やパディングが全くないため、実際には左上隅にあります。私はすでにdivのいくつかのパディングと幅を調整します。もう一つのこと。常にh1-h6タグの余白を削除してください。時にはそれはあなたのデザインを台無しにする。このフィドルを見てください。 https://jsfiddle.net/cs4tspc0/2/ –

どのようにこれらの2つの座って座って作る？

答えて

関連する問題