元素不固定在窗口上

问题描述：

在标题上，我需要

标志位于横幅的左侧（没有空格）

横幅和标志始终位于页面中间（不管屏幕大小）

还有四个图片，应始终位于右上角
窗口（不考虑屏幕大小）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  <style>
 .form-control{
  -webkit-border-radius: 5;
     -moz-border-radius: 5;
          border-radius: 5;
}

#logo{
        float:right;
}

@media screen and (min-width: 480px) {
    #logo{
        float:left;
    }
}

@media screen and (min-width: 768px) {
    #logo{
        float:left;
    }
}



.searchinput{
  height: 40px;
  border:#000 1px solid;
  box-shadow: none;
  margin-bottom:10px;
}

.btn-search{
  background: #777;
  width:95%;
  height: 40px;
  border: 1px solid #777;
  border-radius: 4px;
  padding:8px 50px;
  display: inline-block;
  text-align: center;
  color: #fff;
  font-weight: 100;
  letter-spacing: 0.05em;
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.1);
}

.btn-search:hover{
  color: #fff;
  text-decoration: none;
  border-color: #3c3c3c;
  background: #3c3c3c;
  box-shadow: none;
}

.btn-search:a{
  padding-top: 50px;
}
  </style>

</head>
<body>


<div class="container-fluid">
<div class="row" >
<div class="col-md-9 col-sm-9 col-xs-2">
<div id="banner">
<div id="logo" style="margin-right:0px;">
<img height="40px" width="40px" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR_FCNfsR_UhKGdOTtUKK8XfQXKnlgw5Q0jaBbdiCSBTnCoaGgqIA">
</div>
  <img height="40px;" width="300px;" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR-32Ge8DaAq_81IBLPFdRWmKVYgvN9YyDKKjXh6CTTpgey8qbC"></div>
</div>


</div>

</div>
<div class="col-md-3">
<div id="images" style="float:right;">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR_FCNfsR_UhKGdOTtUKK8XfQXKnlgw5Q0jaBbdiCSBTnCoaGgqIA" width="20px" height="20px"/>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR_FCNfsR_UhKGdOTtUKK8XfQXKnlgw5Q0jaBbdiCSBTnCoaGgqIA" width="20px" height="20px"/>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR_FCNfsR_UhKGdOTtUKK8XfQXKnlgw5Q0jaBbdiCSBTnCoaGgqIA" width="20px" height="20px"/>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR_FCNfsR_UhKGdOTtUKK8XfQXKnlgw5Q0jaBbdiCSBTnCoaGgqIA" width="20px" height="20px"/>
</div>
</div>
</div>

更新

Update

So far, I could put the images on the top right of the window.

<div class="container-fluid">
<div class="row">
<div class="col-md-9 col-sm-9 col-xs-2">
<div id="banner">
<div id="logo" style="margin-right:0px;">
<img height="40px" width="40px" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR_FCNfsR_UhKGdOTtUKK8XfQXKnlgw5Q0jaBbdiCSBTnCoaGgqIA">
</div>
  <img height="40px;" width="300px;" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR-32Ge8DaAq_81IBLPFdRWmKVYgvN9YyDKKjXh6CTTpgey8qbC"></div>
</div>
<div class="col-md-2 col-sm-3 col-xs-10">
<div id="images" style="float:right; position: absolute;
    right: 0;
    top: 5px;
    z-index: 9999;">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR_FCNfsR_UhKGdOTtUKK8XfQXKnlgw5Q0jaBbdiCSBTnCoaGgqIA" width="20px" height="20px"/>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR_FCNfsR_UhKGdOTtUKK8XfQXKnlgw5Q0jaBbdiCSBTnCoaGgqIA" width="20px" height="20px"/>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR_FCNfsR_UhKGdOTtUKK8XfQXKnlgw5Q0jaBbdiCSBTnCoaGgqIA" width="20px" height="20px"/>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR_FCNfsR_UhKGdOTtUKK8XfQXKnlgw5Q0jaBbdiCSBTnCoaGgqIA" width="20px" height="20px"/>
</div>
</div>

</div>

</div>

答

如果你这样做，你甚至不需要媒体查询！

I updated your fiddle to your needs. if you do it like this you don't even need a media query!

请注意新添加的类 google 用于Google图片和已删除的 width 属性

Please pay attention to the new added class google for the google image and the removed width property

http://jsfiddle.net/b9tbxtLb/16/

#logo{
    display: inline-block;
}

.google {
    display: inline-block;
}
#banner {
    position: absolute;
    top: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    transform: translateX(-50%);
    display: inline-block;
    text-align: center;
    width: 100%;
}

#images img{
    display: inline-block;
    text-align: right;
}

@media screen and (min-width: 480px) {}

虽然我认为你将能够自己解决它，提供了这么多的方法）;

although i think you would be able to solve it on your own, with so many approaches provided ;)

元素不固定在窗口上

更新

Update

相关推荐