时间戳

首页 > 解决方案 > HTML/CSS：文本环绕框内的图像？

html - HTML/CSS：文本环绕框内的图像？

问题描述

我正在帮助我最好的朋友建立一个程序员投资组合网站。他正在做三份工作，只是没有时间。我已经做了几乎所有事情，但我只遇到了几个问题（当我解决问题时，它们将是单独的问题）。

第一个问题：我似乎无法让我的框中的文本环绕我框中的图像。

CSS：

        .main .project {
            width: 95%;
            border: 3px #318698;
            outline-color: #318698;
            outline-style: solid;
            display: inline-block;
            padding: 0px 20px 20px 20px;
        }

        .main .project img {
            width: 20%;
            display: inline-block;
            padding: 20px 0px 20px 0px;
        }

HTML：

<div class="main">
        <h1>Projects</h1>
        <div class="project">
            <img src="icon.png" align="top"></img>
            <h2>Project Name</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <p2>Date of Project | Relevant Code Aspects (JAVA, Python, SQL)</p2>
        </div>

如果您想查看完整页面，我已经设置了 CodePen。

标签： htmlcss

解决方案

这就是 CSS float 的用途（flex 已经占用了它以前的一些用途） - 将文本包裹在图像周围。

这里最简单的是您的问题中的代码，其中带有一个浮点数 - 更改视口宽度以查看效果。显然，您将希望使用边距、最小尺寸等来获得您想要的效果。

<style>.main .project {
  width: 95%;
  border: 3px #318698;
  outline-color: #318698;
  outline-style: solid;
  display: inline-block;
  padding: 0px 20px 20px 20px;
}

.main .project img {
  width: 20%;
  display: inline-block;
  float: left;
  padding: 20px 0px 20px 0px;
}
<div class="main">
  <h1>Projects</h1>
  <div class="project">
    <img src="https://picsum.photos/id/1015/200/300" align="top"></img>
    <h2>Project Name</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p2>Date of Project | Relevant Code Aspects (JAVA, Python, SQL)</p2>
  </div>
</div>

推荐阅读