0

嗨，我如何让 div 'one' 和 div 'three' 自动调整到屏幕侧，同时在 css 中保持 div 'two' 宽度不变？所有三个 div 应该在同一行

我的 HTML 是这样的；

<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如下；

    #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;}

任何建议都非常感谢。感谢您的关注

4

2 回答 2

2

你可以这样做我的小提琴

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;
}
​
于 2012-10-07T06:54:51.453 回答
1

首先，确保您匹配 id。 thr不一样three。

我对 css 所做的更改：

  1. 缩进它。这是一个很好的做法。
  2. 以父 div 大小的百分比声明 div 的宽度。您根本没有声明宽度。
  3. 加了一点padding，让3个内层div停留在外层div的中心

这是CSS：

#x 
 {
  position:relative;
  padding:1.5px;
  height:34px;
  border:1px solid gray;
 }
#one 
 { 
  height:30px;
  border:1px solid red;
  width:33%;
  float:left; 
 }
#two 
 {
  height:30px; 
  border:1px solid green; 
  width:33%;
  float:left;
 }
#three 
 {
  height:30px;
  border:1px solid blue;
  width:33%;
  float:left;
 }
于 2012-10-07T06:49:32.730 回答