2017-01-27 7 views
-4

저는 재료 designe 프레임 워크로 몇 가지를 시도하고 있지만 일부 기능은 작동하지 않습니다. 여기에 내가 무엇을 가지고 있습니다 :요소를 동일한 줄에 유지하는 방법

screenshot

하지만 텍스트가 상단에 시작하고 텍스트가 그림처럼 다른 라인으로 이동하지 않도록 거기에 있고 싶어. 여러분이 저를 도울 수 있기를 바랍니다.

<p><img src="http://placehold.it/350x150" alt="W3Schools.com" width="100" height="140"> 
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

+1

에 둘을 둘러싸고 뭐야? –

+0

* 디버깅 도움말을 찾는 질문 ("이 코드가 작동하지 않는 이유는 무엇입니까?")에는 원하는 동작, 특정 문제 또는 오류 및 질문 자체에서이를 재현하는 데 필요한 가장 짧은 코드가 포함되어야합니다. 분명한 문제 성명이없는 질문은 다른 독자에게 유용하지 않습니다. 참조 : [mcve].를 만드는 방법 * – BSMP

답변

0

나는 다음과 같은 테이블을 사용 :

<table><tr><th><img src="yourimgsrc.jpeg"></th><th><p>Your text here</p></th></tr></table> 

이이 문제를 방지, 같은 높이에있는 두 개의 행 (<th>) 말 때문에

0

나는 이것이 당신이 찾고있는 것이라고 믿습니다. 당신은 모두가해야 할 것이라고 IMG 다음 하나 <div> 및 텍스트 그래서 우리는 어디에서 문제를 지적 할 수 당신은 당신의 코드를 공유 할 수있는 별도의 <div>

#header{ 
 
    display:flex; 
 
    flex-direction:row; 
 
} 
 

 
#column1{ 
 
    display:flex; 
 
    flex-direction:column; 
 

 
} 
 

 

 
#column2{ 
 
    display:flex; 
 
    flex-direction:column; 
 
    padding-left: 20px; 
 
}
<div id="header"> 
 
    <div id="column1"><img src="http://placehold.it/350x150" alt="W3Schools.com" width="100" height="140"></div> 
 
    <div id="column2"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit<br/> Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br/> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div> 
 
</div>

관련 문제