10

これを適切にタイトル付けする方法がわかりませんが、ここに私の問題があります。

私はこのレイアウトを持っています：

<html>
<body>
    <div id="content">this is my page</div>
    <div id="button">magic button</div>
</body>
</html>

css：

#button {
  position: fixed;
  bottom: 20px;
  background-color: #f00;
  padding: 5px;
  left: 50%;
  margin-left: 250px;

}

html, body{
  height: 100%;
}
#content {
  margin: 0 auto;
  width: 700px;
  min-height: 100%;
  background-color: #eee;
}​

ここでフィドルを参照してください：http：//jsfiddle.net/n6UPF/

画像

私のページは私が望むように機能し、ボタンはまさに私が望む場所にあります。

しかし、ボタンのテキストを変更すると、正しく配置されなくなります。

コンテンツ領域の右端を基準にして「固定」で配置したいと思います。

これは純粋なCSSで実行できますか？

4

6 に答える 6

10

HTML の変更が許容される場合は、ラッパーを使用できます。

<div id="button-wrapper">
    <div id="button">magic button</div>
</div>

#button-wrapper {
    bottom: 40px;
    left: 50%;
    margin-left: 350px;
    position: fixed;
}

#button {
    background-color: red;
    padding: 5px;
    position: absolute;
    right: 10px;
    white-space: nowrap;
}

http://dabblet.com/gist/3740941

いいえ、それは本当にきれいではありませんが...

于 2012-09-18T02:36:24.137 に答える
1

どういう意味ですか...

#button
{
    position: fixed;
    right: 20px;
}

...または右側に必要な距離はありますか？または、他の何か？

于 2012-09-18T02:27:11.873 に答える
0

float：rightプロパティを探しているのではないかと思います。http://jsfiddle.net/n6UPF/1/を見て、それがあなたが探していたものであるかどうかを確認できますか。

于 2012-09-18T02:29:00.833 に答える
0

あなたの質問を完全に正しく理解しているかどうかはわかりませんが、のright代わりにプロパティを使用することはできませんleftか?

例: http://jsfiddle.net/baKra/

于 2012-09-18T02:25:16.547 に答える
0

通常、正確な配置で問題が発生するのは、配置された要素の幅を指定していないためです。ブラウザはそれ自体を計算しようとしますが、それによって問題が発生する可能性があります。

適切に配置されなくなったときにどのように見えるかを投稿する方法はありますか?

于 2012-09-18T02:26:18.613 に答える
0

変更してみる

#button {
position: fixed;
bottom: 20px;
background-color: #f00;
padding: 5px;
left: 50%;
margin-left: 250px;
}

に

#button {
position: fixed;
bottom: 20px;
background-color: #f00;
padding: 5px;
right:20px
}
于 2012-09-18T02:39:12.153 に答える