html - div 和 span 之间的 float 图像

Question

我怎样才能使调制解调器的图像如下所示 float 到其下方的跨度之上。我使用 Div 作为标签，使用 span 作为内容，但是可以根据需要进行更改。请参阅下面的代码。

图片:

代码:

<style>
#primary_modem_label{

    position: absolute;
    width: 100%;
    height: 15%;
    background-color: black;
    background-image:url(/assets/Billion7800NX.png);
    background-size:     30px;                      /* <------ */
    background-repeat:   no-repeat;
    background-position: left center;

    font-family:arial;
    font-size: 1.2vw;
    color:white;


}
.primary_modem_class{

    position: relative;
  float: left;
    width: 30%;
    font-size: 2.5vw;
    margin:0.2%;
    background: #aaaaaa;
    overflow:hidden;

}

</style>
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.3.1.css">
<link rel="stylesheet" href="assets/jqm-icon-pack-3.0.0-fa.css">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="shortcut icon" href="/favicon.ico">


<div id="page" data-role="page" data-theme="a" data-url="page" tabindex="0" class="ui-page ui-body-a ui-page-active" style="min-height: 628px;">
<div data-role="header" data-position="inline" data-theme="d" data-backbtn="false" class="ui-header ui-bar-d" role="banner">
<h1 class="ui-title" role="heading" aria-level="1">QKradio Monitor</h1></div>

<div class="primary_modem_class" id="primary_modem_stable_div">
    <div id="primary_modem_label">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbspPrimary Modem</div>
    <span class="font1"><br>Down Link: </span> 
    <span id="local_primary_connection_adsl_down_speed" class="font5">updating</span>    
    <span class="font1"><br>Up Link: </span>
    <span id="local_primary_connection_adsl_up_speed" class="font4">updating</span> 
    <span class="font1"><br>Current Up speed: </span>
    <span id="primary_upload_speed" class="font4">updating</span> 
    <span class="font1"><br>Uptime: </span>
    <span id="local_primary_connection_uptime" class="font4">updating</span> 
</div>

Answer 1

为什么不能像下面这样使用 img 标签而不是 background-image？

此外，请使用 text-align 将“主调制解调器”居中对齐，而不是使用  

<style>
#primary_modem_label{
    position: absolute;
    width: 100%;
    height: 15%;
    font-family:arial;
    font-size: 1.2vw;
    color:white;
    background-color:black;
    text-align:center;

}
.primary_modem_class{
    position: relative;
    float: left;
    width: 30%;
    font-size: 2.5vw;
    margin:0.2%;
    background: #aaaaaa;
    overflow:hidden;
}

</style>
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.3.1.css">
<link rel="stylesheet" href="assets/jqm-icon-pack-3.0.0-fa.css">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="shortcut icon" href="/favicon.ico">


<div id="page" data-role="page" data-theme="a" data-url="page" tabindex="0" class="ui-page ui-body-a ui-page-active" style="min-height: 628px;">
<div data-role="header" data-position="inline" data-theme="d" data-backbtn="false" class="ui-header ui-bar-d" role="banner">
<h1 class="ui-title" role="heading" aria-level="1">QKradio Monitor</h1></div>

<div class="primary_modem_class" id="primary_modem_stable_div">
    <div id="primary_modem_label"><img src="w3css.gif" align="left"/> Primary Modem</div>
    <span class="font1"><br>Down Link: </span> 
    <span id="local_primary_connection_adsl_down_speed" class="font5">updating</span>    
    <span class="font1"><br>Up Link: </span>
    <span id="local_primary_connection_adsl_up_speed" class="font4">updating</span> 
    <span class="font1"><br>Current Up speed: </span>
    <span id="primary_upload_speed" class="font4">updating</span> 
    <span class="font1"><br>Uptime: </span>
    <span id="local_primary_connection_uptime" class="font4">updating</span> 
</div>