Html 两个图像之间的文本？_Html_Css

Html 两个图像之间的文本？

html css

Html 两个图像之间的文本？,html,css,Html,Css,我不熟悉html/CSS，并且尝试在两个图像之间放置文本。使用下面的代码，我能够做到这一点。但是如果我有太多的文本，格式就会出现问题，如图1所示。您能告诉我如何使我的网站看起来像图2吗 <!DOCTYPE html> <html> <body> <div class="header"> <img src="http://www.w3schools.com/browsers/pic_chart.jpg" style="vertica

我不熟悉html/CSS，并且尝试在两个图像之间放置文本。使用下面的代码，我能够做到这一点。但是如果我有太多的文本，格式就会出现问题，如图1所示。您能告诉我如何使我的网站看起来像图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:

图2:

您可以浮动所有元素，将文本包装在div中，然后为包含文本的div指定宽度。可以使用内联样式执行此操作，也可以在单独的样式表中执行此操作，如示例所示

添加的样式：

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

试试这样的

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

所有文本

您可以使用以下表格：

或者您可以通过使用float来使用div，如：

如果您需要动态宽度的中柱，这项功能非常有效：

HTML:

对于一个简单的修复，我将使用一个HTML表。一个单行3列表格可以工作，只需在

标签中使用

align

，和/或在

感谢您的所有回答和所有详细信息。他们同样乐于助人。

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

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

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

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