Question

你好如何让div'one'和div'3'自动调整到屏幕边，同时在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;}

任何建议都非常感谢。谢谢你看

Answer 1

你可以这样做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;
}

Answer 2

首先，确保您匹配ID。 thr与three不同。

我对css所做的更改：

缩进它。这是一个很好的做法。
以父div大小的百分比声明div的宽度。你还没有声明宽度。
添加了一点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;
 }

如何自动调整左/右div标签宽度以适应屏幕，同时保持中间div宽度静止

2 个答案: