My timer image goes on next line of the page when i look thru mobile device and i wanna stop that...only using css I have 2 images logo and timer. the problem is when i see my header on small device the timer image goes on next line..and it looks weird.
<header class="mainheader">
<div>
<img src="/images/logo.png">
<img src="/images/timer.png" class="timerimg">
</div>
</header>
.maiheader{
height: 4em;
position: absolute;
top: 0;
left: 0;
right: 0;
padding-top: 0.9em;
padding-left: 2em;
padding-right:2em;
}
.timerimg{
float:right;
}
If you want to display both images in one line then you can structure your code like this
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
.maiheader{
height: 4em;
position: absolute;
top: 0;
left: 0;
right: 0;
padding-top: 0.9em;
padding-left: 2em;
padding-right:2em;
}
.logo{
float:left;
width:50%;
}
.timer{
float:left;
width:50%;
}
img
{
width:100%;
}
</style>
</head>
<body>
<header class="mainheader">
<div>
<div class="logo">
<img src="http://www.gettyimages.in/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg"></div>
<div class="timer"> <img src="http://www.gettyimages.in/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg"></div>
</div>
</header>
</body>
</html>
<body onresize="demo()">
<header class="mainheader">
<div>
<img src="/images/logo.png" id="logo0">
<img src="/images/timer.png" id="logo1"class="timerimg">
</div>
</header>
<style>
.maiheader{
height: 4em;
position: absolute;
top: 0;
left: 0;
right: 0;
padding-top: 0.9em;
padding-left: 2em;
padding-right:2em;
}
.timerimg {
float:right;
}
</style>
<script>
function demo(){
var logo1 = document.getElementById("logo1").style;
var logo0 = document.getElementById("logo0").style;
if(innerWidth < 358){logo1.marginTop="-238";}else{logo1.marginTop="0";}
}
</script>
</body>
i think this will help you some
.wrapper { width: 49%; max-width: 49%; display: inline-block; } .logo { background: url('https://www.google.co.in/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png') no-repeat; width: 100%; height: 0; padding-top: 33.82%; /* (img-height / img-width * width) */ background-size: contain; } .timer { background: url('https://www.google.co.in/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png') no-repeat; width: 100%; height: 0; padding-top: 33.82%; /* (img-height / img-width * width) */ background-size: contain; }
<header class="mainheader"> <div class="wrapper"> <div class="logo"></div> </div> <div class="wrapper"> <div class="timer"></div> </div> </header>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.