0

こんにちは、CSS で div '2' の幅を静的に保ちながら、div 'one' と div 'three' を画面側に自動調整するにはどうすればよいですか? 3 つの 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

あなたはこのようにそれを行うことができます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;
}
​
于 2012-10-07T06:54:51.453 に答える
1

まず、ID が一致していることを確認します。 thrと同じではありませんthree。

私がCSSに加えた変更：

  1. インデントします。それは良い習慣です。
  2. 親 div のサイズのパーセンテージで div の幅を宣言します。幅をまったく宣言していませんでした。
  3. padding3 つの内側の 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 に答える