어떻게 이것을 하나의 div로 만들 수 있습니까?

Question

어떻게하면 하나의 div에서 만들 수 있습니까? 현재 그것은 두 개의 div가 있지만 왼쪽에 표시되는 이미지와 같은 한 div에서 만들어야하고 텍스트는 오른쪽에 있어야합니다. 당신은 IMG 태그와 텍스트 노드 인 (동일 DIV에있는 이유를 묻는 경우

<div style='float: left; margin-left: 6px; margin-bottom: 6px; height: 191px;'> 
    <img src='http://www.cnn.com/features/150px.jpg' width='100' height='100' border='0' alt='Lipsum' /> 
    <br /> 
    <img src='http://www.cnn.com/features/b150px.jpg' width='100' height='100' border='0' alt='Lipsum' /> 
    <br /> 
    <br /> 
    <br /> 
</div> 
<div id='lipsum'> 
    <p>first paragraph</p> 
    <p>second paragraph</p> 
</div> 

Answer 1

당신은 clear: left를 사용할 수 있습니다 :

참조 :http://jsfiddle.net/thirtydot/FN4h4/

내가 여러 하위 노드에 다른 스타일을 가지고 예를 들어

, 나는 변함없이 템플릿을 사용 CSS :

img { 
    float: left; 
    clear: left; 
    margin: 0 6px 
} 

HTML :

<div id='lipsum'> 

    <img src='http://www.cnn.com/features/150px.jpg' width='100' height='100' border='0' alt='Lipsum' /> 
    <img src='http://www.cnn.com/features/b150px.jpg' width='100' height='100' border='0' alt='Lipsum' /> 

    <p>Lorem ipsum..</p> 
    <p>Lorem ipsum..</p> 
</div> 

Answer 2

다른 사업부에 대한 필요는

<img src='http://www.cnn.com/features/150px.jpg' width='100' 
     height='100' border='0' alt='Lipsum' align="left"/> 

Answer 3

처럼 얼라 인 속성 이미지를주고 무엇을 나에게 들린다), 왜냐하면 당신은 하나의 div 노드 (id = "div_left")에 속하는 모든 하위 노드를 가지고 있기 때문이다. Html, Xml 및 XHtml은 모두 계층 적 노드 구조를 기반으로합니다. 예를 들어 별도의 부동 규칙을 처리하기 위해 div로 분리하려는 것은 별도의 div로 분할해야합니다. 부모 div에 하위 노드를 계속 하위 노드로 배치 할 수 있지만 개별 스타일을 정의하려면 div 또는 span 태그에 명시 적으로 배치해야합니다.

이

<div id="parentId"> 
    <div id="child1" /> 
    <div id="child2" /> 
</div> 

Answer 4

왜 하나 이상의 div를 사용하지 않도록 하시겠습니까? 내가이 같은 것을 할 거라고 :

HTML

<div class="article"> 
    <img src="image1.jpg"/> 
    <p>Paragraph 1</p> 
</div> 
<div class="article"> 
    <img src="image2.jpg"/> 
    <p>Paragraph 2</p> 
</div> 

CSS 나는 단지이 하나 개의 사업부를 참조

.article 
{ 
    clear: both; 
    width: 400px; 
} 
.article img 
{ 
    float: left; 
} 
.article p 
{ 
    float: right; 
} 

Working Demo