代码之家 › 专栏 › 技术社区 › Ossama

div和span之间的浮动图像

css html

Ossama · 技术社区 · 7 年前

如何将调制解调器的图像浮动到如下所示的范围之上或之下。我使用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>

2 回复 | 直到 7 年前

Hema Nandagopal 7 年前

为什么不能使用img标签代替下面的背景图像?

此外,请使用文本对齐来对齐中间的“主调制解调器”,而不是使用amp;nbsp

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

Ed91gg 7 年前

使用标记并在src属性上写入路径。。。然后,您有两个选项,将img(html)放在您想要放在顶部的任何内容之前,和/或在css或style属性中使用z-index使图像位于顶部。