2

divを自分の隣に浮かせたいのですinputが、代わりにその上に浮かんでいます。理由はわかりません。これは、divが絶対位置を使用するように設定されているかのようです。私はおそらく何かばかげたものを見落としていると思いますが、それは何ですか？

html：

<input type="file" id="files" name="file" />
<div id="progress_bar"><div class="percent">0%</div></div>​

css：

input { float: left;}

#progress_bar {
  margin: 10px 0;
  padding: 3px;
  border: 1px solid #000;
  font-size: 14px;
  //clear: both;
  opacity: 0;
  -moz-transition: opacity 1s linear;
  -o-transition: opacity 1s linear;
  -webkit-transition: opacity 1s linear;
  }

#progress_bar.loading {
    opacity: 1.0;
  }

#progress_bar .percent {
    background-color: #99ccff;
    height: auto;
    width: 0;
  } ​

ここに例があります：http： //jsfiddle.net/sWrvU/ これはhtml5rocksの読み取りファイルのデモに基づいていますhttp://www.html5rocks.com/en/tutorials/file/dndfiles/

デモが実際に機能することを確認するためにコメントclear:bothを外します（つまり、その上にdivがないため、ボタンを押すことができます）が、明らかにdivは入力の横にフロートされていません。

4

2 に答える 2

1

不透明度は、要素が透明であっても要素がまだ存在することを意味するため、不透明度の代わりに表示を使用するように変更しました。

CSS

input {
    float: left;
}    
#progress_bar {
    margin: 10px 0;
    padding: 3px;
    border: 1px solid #000;
    font-size: 14px;
    display:none;
    -moz-transition: opacity 1s linear;
    -o-transition: opacity 1s linear;
    -webkit-transition: opacity 1s linear;
  }
  #progress_bar.loading {
    display:block;
  }
  #progress_bar .percent {
    background-color: #99ccff;
    height: auto;
    width: 0;
  }​
于 2012-08-28T22:04:46.543 に答える
1

不透明度の代わりにdisplay：blockを使用すると、遷移が削除されます。これは、保持しようとしていると思います。

プログレスバーは、入力が下に浮いているほど「上に浮いている」わけではありません。プログレスバーもフロートさせると、状況は少し良くなるはずです：http: //jsfiddle.net/cjc343/sWrvU/24/

于 2012-08-28T22:18:22.933 に答える