html - 两个图像之间的文本?

标签 html css

我是 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: enter image description here


图2: enter image description here

最佳答案

JS Fiddle

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

添加样式:

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

关于html - 两个图像之间的文本?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19697585/

相关文章:

javascript - 当用户滚动到特定部分时触发动画

asp.net - 如何在没有页眉和页脚的情况下在 Asp.Net 中打印网页 - ASP.NET

javascript - 当我添加新文本字段时,文本字段会重置

javascript - iPhone Bootstrap 4 Alpha 上不显示下拉菜单

html - li 元素在 sibling 有不同数量的文本行时下推

php - MySQL,从 $_SESSION ['username' 开始计数]

html - css如何在中心圆旁边创建2条水平线?

html - 在 Opera 中的内联 block 元素中使用绝对定位元素

javascript - 在 HTML 中使用未定义的标签名称?

css - 第一行 x-repeat 背景图像与 css