두 이미지 사이에 텍스트?

나는 html/CSS를 처음 사용하여 두 이미지 사이에 텍스트를 넣으려고합니다. 다음 코드를 사용하여 그렇게 할 수있었습니다. 그러나 많은 텍스트가 필요한 경우 형식은 figure 1과 같이 순서가 어긋납니다. 내 웹 사이트를 Figure 2처럼 보이게 만들 수있는 방법을 알려주시겠습니까?두 이미지 사이에 텍스트?

<!DOCTYPE html> 
<html> 
<body> 
    <div class="header"> 
    <img src="http://www.w3schools.com/browsers/pic_chart.jpg" style="vertical-align: middle"/> 
    <a href="http://www.w3schools.com" style="font-family:Georgia;color:black;font-size:17px;">The site provides a reference manual covering many aspects of web programming, including technologies such as HTML, XHTML, CSS, XML, JavaScript, PHP, ASP, SQL etc. W3schools presents thousands of code examples. By using the online editor provided, readers can edit the examples and execute the code experimentally.</a> 
    <img src="http://www.w3schools.com/browsers/pic_chart.jpg" style="vertical-align: middle"/> 
    </div> 
</body> 
</html>

그림 1 : enter image description here

그림 2 : 당신은 모든 요소를 떠 사업부의 텍스트를 포장 할 수 enter image description here

출처

2013-10-31 D P.

모든 답변과 모든 세부 사항에 감사드립니다. 그들은 똑같이 도움이되었다. –

을 나는 것 간단한 수정의 경우 HTML 표를 사용하십시오. 단일 행 3 열 표가 작동하고 <td> 태그에 align 또는 <img> 태그로 그림 크기로 재생됩니다. 당신이 요구하는 것을 할 수있는 많은 속성들이 있습니다. 체크 아웃 http://www.w3schools.com/html/html_tables.asp

<!DOCTYPE html> 
<html> 


<body> 
    <div class="header"> 
     <table> 
      <tr> 
       <td> 
        <img src="http://www.w3schools.com/browsers/pic_chart.jpg" style="vertical-align: middle"> 
       </td> 
       <td> 
        <a href="http://www.w3schools.com" style="font-family:Georgia;color:black;font-size:17px;">The site provides a reference manual covering any aspects of web programming, including technologies such as HTML, XHTML, CSS, XML, JavaScript, PHP, ASP, SQL etc. W3schools presents thousands of code examples. By using the online editor provided, readers can edit the examples and execute the code experimentally. 
        </a> 
       </td> 
       <td> 
        <img src="http://www.w3schools.com/browsers/pic_chart.jpg" style="vertical-align: middle"> 
       </td> 
      <tr> 
     </table> 
    </div> 

</body> 
</html>

출처

2013-10-31 03:21:17 DJXiej

JS Fiddle

그런 다음 텍스트가 들어있는 div의 너비. 이 작업은 인라인 스타일로 수행 할 수도 있고 예제와 같이 별도의 스타일 시트로 수행 할 수도 있습니다.

스타일 추가 :

img { 
    float: left; 
} 
#text { 
    width: 300px; 
    float: left; 
}

출처

2013-10-31 02:51:48

당신은 같은 테이블을 사용할 수있는이

<img style="float:left" /><div style="float:left">All your text</div><img/>

출처

2013-10-31 02:52:17 TGH

같은 시도 : http://jsfiddle.net/bTSNj/

<div class="header"> 
    <table> 
    <tr> 
     <td> 
     <img src="http://www.w3schools.com/browsers/pic_chart.jpg" style="vertical-align: middle"/> 
     </td> 
     <td> 
     <a href="http://www.w3schools.com" style="font-family:Georgia;color:black;font-size:17px;">The site provides a reference manual covering many aspects of web programming, including technologies such as HTML, XHTML, CSS, XML, JavaScript, PHP, ASP, SQL etc. W3schools presents thousands of code examples. By using the online editor provided, readers can edit the examples and execute the code experimentally.</a> 
     </td> 
     <td> 
     <img src="http://www.w3schools.com/browsers/pic_chart.jpg" style="vertical-align: middle"/> 
     </td> 
    </tr> 
    </table> 
</div>

또는 당신이 좋아하는 플로트를 사용하여 DIV를 사용할 수 있습니다 http://jsfiddle.net/j94PP/

당신이 폭 동적 가운데 열이 필요하면 10

<div class="header"> 
    <div class="column1"> 
    <img src="http://www.w3schools.com/browsers/pic_chart.jpg" style="vertical-align: middle"/> 
    </div> 
    <div class="columtext"> 
    <a href="http://www.w3schools.com" style="font-family:Georgia;color:black;font-size:17px;">The site provides a reference manual covering many aspects of web programming, including technologies such as HTML, XHTML, CSS, XML, JavaScript, PHP, ASP, SQL etc. W3schools presents thousands of code examples. By using the online editor provided, readers can edit the examples and execute the code experimentally. 
    </a> 
    </div> 
    <div class="column3"> 
    <img src="http://www.w3schools.com/browsers/pic_chart.jpg" style="vertical-align: middle"/> 
    </div> 
</div>

출처

2013-10-31 02:57:55

이 잘 작동 : http://jsfiddle.net/SNMQm/6/

HTML :

<div class="header"> 
    <div class="content-right"> 
     <img src="http://www.w3schools.com/browsers/pic_chart.jpg" style="vertical-align: middle"> 
    </div> 

    <div class="content-left"> 
     <img src="http://www.w3schools.com/browsers/pic_chart.jpg" style="vertical-align: middle"> 
    </div> 
    <div class="content"> 

     <a href="http://www.w3schools.com" style="font-family:Georgia;color:black;font-size:17px;">The site provides a reference manual covering many aspects of web programming, including technologies such as HTML, XHTML, CSS, XML, JavaScript, PHP, ASP, SQL etc. W3schools presents thousands of code examples. By using the online editor provided, readers can edit the examples and execute the code experimentally.</a> 
    </div> 
</div>

CSS :

.content-right { 
    float: right; 
    width: 130px; 
} 
.content-left { 
    float: left; 
    width: 130px; 
} 
.content { 
    margin: 0 150px; 
    width:100%; 
}

출처

2013-10-31 03:14:39

두 이미지 사이에 텍스트?

답변

관련 문제