インライン要素を含むウェブサイトのランディングページを作成する

Question

インライン要素が2つあるヘッダーを作成しようとしています。私は（私は2つの要素を丸で囲んだ）のために何をつもりです：

は、どのように私はこれについて行くでしょうか？私はテキストを右に浮かべてみましたが、画面全体を占めていました（リサイズしていません）。

Answer 1

正しく、イメージの左端と右端にイメージがあるはずですが、説明文が必要ですか？

その場合は、（多くの中で）一つの選択肢は、テキストを保持し、我々はそれを正しく行うには、画像のサイズを知っている必要がありますelementにmargin-leftを与えることです：

.header { 
 
    background: url(" http://placehold.it/350x350") no-repeat; 
 
} 
 
.content { 
 
    margin-left: 355px; 
 
}

<div class="header"> 
 
    <div class="content"> 
 
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has 
 
    survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing 
 
    software like Aldus PageMaker including versions of Lorem Ipsum. End! 
 
    </div> 
 
</div>

Answer 2

あり、それを行うには多くの方法がありますが、あなたは、行で2つのオブジェクトを入れ、それらをフロートしたいグリッドシステムを使用すると、次のように左：私は理解している場合

* { 
 
-webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
    
 
} 
 

 
.row { 
 
width: 100%; 
 
    clear: both; 
 
    border: 1px solid blue; 
 
} 
 

 
.onehalf { 
 
width: 50%; 
 
    float: left; 
 
    border: 1px solid red; 
 
}

<div class="row"> 
 
<div class="onehalf">THING ONE</div> 
 
    <div class="onehalf">THING TWO</div> 
 
</div>