元素没有固定在窗口上

时间：2015-03-20 04:15:46

标签： css css3 twitter-bootstrap twitter-bootstrap-3

在标题上，我需要

  • 徽标位于横幅的左侧（没有空格）
  • 横幅和徽标始终位于页面中间（无论屏幕尺寸如何）
  • 还有四张图片应始终位于右上角 窗口（不论屏幕大小）

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

更新

到目前为止，我可以将图像放在窗口的右上角。

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

4 个答案:

答案 0 :(得分：3)

你错放了一个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>

答案 1 :(得分：2)

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

请注意Google图片和已移除的google媒体资源的新增加的课程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) {}

虽然我认为你可以自己解决它，提供了很多方法;）

答案 2 :(得分：0)

centering inline-block怎么样？

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

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

答案 3 :(得分：0)

只需删除所有不需要的css，只使用下面的代码段， 请参阅以下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

，它将解决您的问题
相关问题
最新问题