Question

我正在尝试构建一个保持在顶部，固定和中间的导航栏。但是如果屏幕尺寸足够大，可以根据我的需要左右使用一些未使用的空间，并且中间还有一些空间。

现在，如果有人调整了浏览器窗口的大小，我需要开始从屏幕上剥离未使用的空间，并只保留父div的基本div。

参考Facebook桌面导航栏。

如何使用html和css实现此目的？

另外，如果有人调整大小以至于对象会受到影响，我希望他们只是在不改变位置的情况下切断屏幕。

<html>
<head> <style>
.navbar {
position:fixed;
background: #000;
height: 30px;
width: 100%}
.logo_div{
margin-left:7%;
float:left;
width:32px;
display:inline-block;
height:32px;
}
.search_div {
width: 450px;
display: inline-block;
margin-left:15px;
float:left;
}
#search_box {
width:100%;
border-radius:5px;
border:1px solid #819597;
padding:4px;
border-bottom-right-radius:0px;
border-top-right-radius:0px;
border-right:none;
height:24px;
font-family: Arial;
font-size:16px;
font-weight:lighter;
outline:none;
}
#search_box:focus {
border-right:none;
background-color:#FCFCDA;
}
li {
text-decoration:none;
padding:5px;
padding-bottom:0px;
margin:1px;
margin-top:0px;
list-style:none;
display:inline-block;
}
.menu {

padding:3px;
float:left;
display:inline-block;
padding-left:10px;

}
ul {
margin-top:0px;}
#static_head{
width:1024px;
margin:0 auto;
position:absolute;
text-align:center;
}
.user_controller {
display:inline;
margin:0 auto;
height:100%;
width:auto;
}
</style>
</head>

<body>

<div class="container">
<div class="navbar" id="dHeaderfixed">
<div id="static_head">
<div id="logo_div" ></div>
<div class="search_div">
<form action="search.php" method="get" id="search_form" name="livesearch">
<input type="text" id="search_box" name="query"></form>
</div>
<div class="menu">
a list of things 
</div>
<div id="ui_user_control">some stuff</div></div>
</div></div></div>

现在，空白的未使用空格应位于徽标div左侧的导航栏中，这将根据屏幕大小的要求而定。同样，搜索框和菜单div之间将存在未使用的空间，菜单div右侧将有另一个未使用的空间，因此当用户调整浏览器窗口大小时，所有这些元素都保留在中间，如果进一步调整大小，屏幕只是削减它们而不是改变它们的位置。谢谢！

Answer 1

https://jsfiddle.net/xhzxduz2/2/

CSS

FileOutputStream bytewriter = new FileOutputStream(output_file_name);

byte[] bytedata = Files.readAllBytes(Paths.get("myPath"));

byte[] result = edited_data.getBytes();

bytewriter.write(result);

bytewriter.close();

HTML

nav {
  position: fixed;
  left: 0;
  top: 0;
  background: red;
  height: 48px;
  min-width: 320px;
  width: 100%;
}

.content {
  max-width: 960px;
  margin: 0 auto;
  color: white;
  background: blue;
  height: 100%;
}

如何通过双向切割div来保持对象居中？

1 个答案: