Question

即使我在元素之后放置一个BR标签，是否也可以将元素保持在DIV的同一行中？例如：

DIV
↑→全名（此处为br）
图像→地址（此处为另一个br）
↓→电话
/ DIV

并准确显示此示例吗？

↑
我
M→全名
A→地址
G→电话
E
↓

彼此相邻。我正在使用此代码，但无法正常运行；

      <div style="white-space:nowrap; display:inline-block;">
       <a href="http://www.whateveraddress.com"><img src="localhost/xrEN.png" width="165" height="50"></a>
       <b style="color:black; font-size:12; font-family:Arial;">Full Name</b><br>
       <b style="color:black; font-size:12; font-family:Arial;">Address</b><br>
       <b style="color:black; font-size:12; font-family:Arial;">Tel</b><br>
      </div>

Answer 1

您可以尝试使用img align属性，例如（对于html4）：

<div>
<a href="http://www.whateveraddress.com"><img src="localhost/xrEN.png" width="165" height="50" align="left"></a>
<b style="color:black; font-size:12; font-family:Arial;">Full Name</b><br>
<b style="color:black; font-size:12; font-family:Arial;">Address</b><br>
<b style="color:black; font-size:12; font-family:Arial;">Tel</b><br>
</div>

对于html5，您可以使用css float属性

Answer 2

添加float: left。

a {
  float: left;
}

Fiddle

如果您拥有html源代码的控制权，请使用Flexbox。

<div class='main'>
  <div>
    <a href="https://www.whateveraddress.com"><img src="http://via.placeholder.com/350x150" width="165" height="50"></a>
  </div>
  <div>
    <b style="color:black; font-size:12; font-family:Arial;">Full Name</b><br>
    <b style="color:black; font-size:12; font-family:Arial;">Address</b><br>
    <b style="color:black; font-size:12; font-family:Arial;">Tel</b><br>
  </div>

</div>

然后添加样式。

.main {
  display: flex;
}

Fiddle

HTML / CSS-即使使用<br/>标签，也可以将元素保持在同一行

2 个答案: