2

我是 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： 在此处输入图像描述


图 2： 在此处输入图像描述

4

5 回答 5

2

JS小提琴

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

添加的样式：

img {
  float: left;
}
#text {
  width: 300px;
  float: left;
}
于 2013-10-31T02:51:48.893 回答
1

对于一个简单的修复，我会使用 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-31T03:21:17.307 回答
0

尝试这样的事情

<img style="float:left" /><div style="float:left">All your text</div><img/>
于 2013-10-31T02:52:17.990 回答
0

您可以使用如下表：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-31T02:57:55.703 回答
0

如果您需要动态宽度的中心列，这很好用：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-31T03:14:39.027 回答