0

だから私は、私が構築しているウェブサイト用の警告システムをまとめています。レイアウトはとてもシンプルです:

<style>
     #alert{
         position:absolute;
         padding:10px;
         display:table;
         margin:0 auto;
     }
</style>
<div id="alert">
    Hey user, I have a very important message for you.
</alert>

さて、要素が絶対的に配置されていない場合、通常display:tableは必要な幅だけを確保するために使用しますが、絶対的に配置するとそれが台無しになります。

要素が必要な幅だけを取り、それでも絶対に配置されるようにする方法はありますか?

編集:
基本的に私が探しているのは、動的な幅を持ち、中央に配置された絶対配置要素です。

4

2 に答える 2

1

これはトリックを行うようでした：

<style>
    #alert {
         position:absolute;
         width:100%; /* Keep in mind this is for an entire page */
         height: 16px; /* Match the font-size of the alert */
         text-align:center;
         cursor:pointer;
    }
    #alert #inner_alert {
         display:inline-block;
         padding:10px;
    }
</style>
<div id="alert">
    <div id="inner_alert">Here is the message!</div>
</div>

これにより、必要な幅だけで絶対に配置される中央の要素が生成されます。

于 2012-07-02T05:27:22.193 に答える
0

ちょっと今、あなたはこのようにleftまたはプロパティを使用することができますright

#alert{
    position:absolute;
    padding:10px;
    left:0;
    right:0;
    top:0;
    bottom:0;
}

left right top bottomレイアウトに応じて値を定義できるようになりました

position absolutedivを定義するよりも定義する場合width or height

これで、この 1 つのライブ デモを使用できますhttp://jsfiddle.net/YvMAJ/

于 2012-07-02T03:57:11.613 に答える