인라인 요소가있는 웹 사이트 방문 페이지 만들기

Question

두 개의 인라인 요소가있는 머리글을 그림, 텍스트로 만들려고합니다. 나는 (필자는 두 가지 요소 원) 무엇을하려고 해요 :

어떻게이 가겠어요? 텍스트를 오른쪽으로 이동 시키려고했지만 전체 화면을 차지합니다 (크기를 조정하지 않음).

Answer 1

올바르게, 이미지의 왼쪽과 오른쪽 끝에 이미지가 있어야합니다. 설명 텍스트가 있어야합니다.

.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>

: 그 (많은 중) 사건 인 경우

은 하나의 옵션은 margin-left 텍스트를 보유하고 있으며 우리가 제대로 할 이미지의 크기을 알아야 element에 제공하는 것입니다

Answer 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>