Question

如何将调制解调器的图像浮动，如下图所示，位于其下方的跨度之上。我已经使用Div作为标签和内容的跨度，但是这可以改变以适应。请参阅下面的代码。

图片：

代码：

<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标签代替背景图像，如下所示？

另外，请使用text-align来对齐＆＃34;主调制解调器＆＃34;在中心而不是使用＆amp; nbsp

＆＃13;

<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>

＆＃13;

Answer 2

使用标签并在src属性上写入路径...然后，你有2个选项，把img（html）放在你想要的顶部之前，和/或在css或style中使用z-index属性使图像成为最佳。

div和span之间的浮动图像

2 个答案: