兩個圖像之間的文本？

我是新來的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列表可以工作，只需align標記<td>標記和/或圖片大小<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文本和然後分配一個寬度到包含文本的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/

<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

兩個圖像之間的文本？

回答

相關問題