元素没有固定在 window

Question

在页眉上，我需要

徽标位于横幅的左侧（没有 space）
横幅和徽标始终位于页面中间（无论屏幕大小如何）
还有四张图片应该始终位于 window（不考虑屏幕尺寸）

Demo

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

更新

到目前为止，我可以将图片放在 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>

Answer 1

你放错了一个 div

你没有错div你忘记放了提前检查一下

<!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" style="background-color:orange;">
<div class="col-md-9">
<div id="banner" style="margin-left: 49%;">
  <img height="40px" width="40px" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR_FCNfsR_UhKGdOTtUKK8XfQXKnlgw5Q0jaBbdiCSBTnCoaGgqIA">
  <img height="40px;" width="300px;" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR-32Ge8DaAq_81IBLPFdRWmKVYgvN9YyDKKjXh6CTTpgey8qbC">

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

</div>

</body>
</html>

Answer 2

centering inline-block怎么样？

#banner-container {
    text-align: center;
}

#banner {
    display: inline-block;
    white-space: nowrap;
}

Answer 3

只需删除所有不需要的 css 并仅使用下面的代码片段，参考下面的link Here.

#image {
 float: right;
 position: absolute;
 right: 0;
 top: 5px;
 max-width: 20%;
}

#logo {
 margin-left: 10%;
 float: left !important;
 max-width :60%
}

如果您删除 HTML 部分中不需要的 div，它将解决您的问题

Answer 4

我根据您的需要更新了您的 fiddle。如果你这样做，你甚至不需要媒体查询！

请注意google图片新增classgoogle和删除width属性

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) {}

虽然我认为你可以自己解决它，但提供了这么多方法;)

元素没有固定在 window

The elements are not fixed on the window

css

twitter-bootstrap

twitter-bootstrap-3

Demo

更新