如何自动调整左/右div标签宽度以适合屏幕，同时保持中间div宽度静态 [英] How to auto adjust left/right div tags width to fit the screen whilst keeping the middle div width static
本文介绍了如何自动调整左/右div标签宽度以适合屏幕，同时保持中间div宽度静态的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
Hi如何让div'one'和div'three'自动调整到屏幕端，同时保持div'two'宽度静态在css？所有三个div应该在同一行
Hi how do I get div 'one' and div 'three' auto adjusted to screen side whilst keeping div 'two' width static in css? all three divs should be in the same row
我的HTML像这样;
my HTML goes as this;
<html>
<header<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="x">
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
</div><!-- close div 'x' -->
</body>
</html>
到目前为止的CSS如下：
and the CSS done so far is as follows;
#x {height:34px; border:1px solid gray;}
#one {height:30px; border:1px solid red;; width:auto; float:left;}
#two {height:30px; border:1px solid green; width:660px; float:left;}
#thr {height:30px; border:1px solid blue; width:auto; float:left;}
任何建议非常感谢。感谢您查找
any suggestions greatly appreciated. Thanks for looking
推荐答案
您可以像这样 我的小提琴
You can do it like this My Fiddle
HTML
<div class="container">
<div class="first"></div>
<div class="static"></div>
<div class="third"></div>
</div>
CSS
.container {
display:-webkit-box;
-webkit-box-orient:horizontal;
-webkit-box-align:stretch;
display:-moz-box;
-moz-box-orient:horizontal;
-moz-box-align:stretch;
display:box;
box-orient:horizontal;
box-align:stretch;
color: #ffffff;
}
div {
height: auto;
}
.first {
background-color: #546547;
}
.static {
background-color: #154d67;
width: 660px;
}
.third {
background-color: #c00000;
}
.first, .third {
-webkit-box-flex:1.0;
-moz-box-flex:1.0;
box-flex:1.0;
}
这篇关于如何自动调整左/右div标签宽度以适合屏幕，同时保持中间div宽度静态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
