如何使文本浮动到HTML / CSS中的图像旁边？

Question

我昨天开始学习一些HTML，今天我也想出了如何使用CSS。但我面临一些麻烦.. 起初我想创建一个简单的商业网站，提供作者姓名和他的东西等 无论如何，我的问题是如何在HTML / CSS中的图像旁边浮动文本？

h2.title {
  width: 120px;
  height: 130px;
  background: url('nopic.png') no-repeat;
  background-size: 170px 130px;
  background-position: 50% 50%;
  background-color: #EEE;
  box-shadow: 0 0 8px rgba(0, 0, 0, .8);
  -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
  -moz-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
  position: left;
}

-

<div id="header">
  <h1>My header</h1>
  <h2 class="Title">Full Name, Age and Nationality</h2>
</div>

这是它输出的内容：

应该是这样的：

P.S接受其他方法，但只是为了保持图像边框的形状等等

Answer 1

我这样做的方法是使用css :after选择器。首先将图像包装在div标签中：

<div id='image'>
    <img  src="https://www.google.com/images/srpr/logo11w.png"/>
</div>

然后在css做这样的事情：

#image img {
    width: 50px;
    height: 50px;
}
#image:after {
    position:absolute; 
    width: 50px; /* this makes it so that the text wraps*/
    content: "name age nationality";
}

可以找到关于后选择器的信息here。

Answer 2

如果您的问题只是＆＃34;如何在某些文字的左侧或右侧浮动图像？＆＃34;那么你所要做的就是使用CSS float，如下所示：

＆＃13;

＆＃13;

img {
  float: left;
}

＆＃13;

<img src="https://www.google.com/images/srpr/logo11w.png" width="30%" />
<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>

＆＃13;

＆＃13;

＆＃13;

Answer 3

将align="left"添加到您的图片中。

欢迎来到网络开发的世界！

<div id='image'>
        <img src="https://www.google.com/images/srpr/logo11w.png" width="100px" height="100px" style="float: left" />
    </div>
    <div>Some Text
        <br />That is
        <br />Left Aligned</div>

Answer 4

没有position:left。

这是一个可能的解决方案，您可以使用background的实际代码：

＆＃13;

＆＃13;

#header div {
  width: 120px;
  height: 130px;
  background: url('http://lorempixel.com/120/130') no-repeat;
  background-size: 170px 130px;
  background-position: 50% 50%;
  background-color: #EEE;
  box-shadow: 0 0 8px rgba(0, 0, 0, .8);
  -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
  -moz-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
  float: left;
  margin:0 10px 0 0
}

＆＃13;

<div id="header">
  <h1>My header</h1>
  <div></div>
  <h2>Full Name, Age and Nationality</h2>
</div>

＆＃13;

＆＃13;

＆＃13;

标记img而非background

的另一种解决方案

＆＃13;

＆＃13;

#header div {
  width: 120px;
  height: 130px;
  background-color: #EEE;
  box-shadow: 0 0 8px rgba(0, 0, 0, .8);
  -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
  -moz-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
  float: left;
  margin:0 10px 0 0
}

＆＃13;

<div id="header">
  <h1>My header</h1>
  <div><img src="http://lorempixel.com/120/130" /></div>
  <h2>Full Name, Age and Nationality</h2>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 5

你也可以拥有像

这样的表格

<div id='image'>
    <img src="https://www.google.com/images/srpr/logo11w.png" align="left" width="100px" height="100px" padding="15px" />
</div>
<div>
<table>
<tr>
<th>Full Name</th><td>Joe Akim</td>
</tr>
<tr>
<th>Age</th><td>23years old</td>
</tr>
<tr>
<th>Nationality</th><td>American</td>
</tr>
</div>