web-dev-qa-db-ja.com

CSSで要素を相対配置した後に表示される空白を削除する方法

私はこの問題をずっと探していましたが、ついに解決策がグーグルの10ページにある不明瞭なフォーラムで見つかりました。解決策は答えです

問題が発生するのは次のとおりです。CSSを使用して要素を相対配置すると、要素があった場所の空白が表示されます...空白は必要ありません！

    .thetext 
    {
        width:400px;
        background:yellow;
        border: 1px dashed red;
        margin:50px;
        padding:5px;
        font-weight:bold;
    }
    .whiteblob
    {
        position:relative;
        top:-140px;
        left:70px;
        width:200px;
        height:50px;
        border: 4px solid green;
        background:white;
        font-size:2.5em;
        color:red;
        
    }
    .footerallowedwhitespaceinblue
    {
        height:10px;
        background-color:blue;
    }
    .footer
    {
        background-color:grey;
        height:200px;
    }
<div class="thetext"><script type="text/javascript">for(c=0;c<50;c++){document.write("Lorem ipsum dolor est, ");}</script>
    </div>
    <div class="whiteblob">
        &nbsp;buy this!
    </div>
    <div class="footerallowedwhitespaceinblue">
    </div>
    <div class="footer">
        The whitespace above is way to big! The buy this still takes up space whilst it is moved.
    </div>

JSFiddle： http://jsfiddle.net/qqXQn/

この例でわかるように、必要な空白は50pxのマージンによるテキストブロックに起因する空白のみです。そして、フッターで許可された間隔は、青で表示されます（見えるように青にします）。問題は...余白が大きすぎることです。「これを購入する」divは、相対的に配置された後でもまだスペースを占有しているためです。

これをどうやって解決しますか？

csslayoutwhitespace
35
Tschallacka

要素の幅または高さに等しい負のマージンを適用することで、これを簡単に解決できます。

上部に配置される高さ100pxの要素の場合、margin-bottom：-100pxを適用します。

下部に配置された高さが100pxの要素の場合、margin-top：-100pxを適用します。

左に配置された幅が100ピクセルの要素の場合、margin-right：-100pxを適用します。

右に配置された幅100ピクセルの要素の場合、margin-left：-100pxを適用します。

cSSスニペットの切り取りと貼り付け：

.top 
    {
    postion:relative;
    top:-100px;
    height:25px;
    margin-bottom:-25px;
    }
.bottom
    {
    postion:relative;
    top:100px;
    height:25px;
    margin-top:-25px;
    }
.left
    {
    postion:relative;
    left:-100px;
    width:25px;
    margin-right:-25px;
    }
.right
    {
    postion:relative;
    left:100px;
    width:25px;
    margin-left:-25px;
    }

そして、修正されたサンプルコードは次のようになります。

.thetext 
{
    width:400px;
    background:yellow;
    border: 1px dashed red;
    margin:50px;
    padding:5px;
    font-weight:bold;
}
.whiteblob
{
    position:relative;
    top:-140px;
    left:70px;
    width:200px;
    height:50px;
    margin-bottom:-50px;
    border: 4px solid green;
    background:white;
    font-size:2.5em;
    color:red;
    
}
.footerallowedwhitespaceinblue
{
    height:10px;
    background-color:blue;
}
.footer
{
    background-color:grey;
    height:200px;
}
<div class="thetext"><script type="text/javascript">for(c=0;c<50;c++){document.write("Lorem ipsum dolor est, ");}</script>
</div>
<div class="whiteblob">
    &nbsp;buy this!
</div>
<div class="footerallowedwhitespaceinblue">
</div>
<div class="footer">
</div>

http://jsfiddle.net/qqXQn/1/

45
Tschallacka

勇気があれば、overflow:hidden;およびbottom negative margin相対的に配置された要素で、残りのスペースを削除します:)。つまり、レスポンシブサイトで。

ただし、必要なコンテンツが隠されていないことを確認してください。

3
Iggy

以下に例を示します。この場合、オブジェクトは右に移動してから、負のトップ値を使用して上に移動しました。後続のマージンスペースを削除するには、等しい負のマージン値を追加する必要がありました。

 position:relative;
 width:310px;
 height:260px;
 top:-332px;
 margin-bottom:-332px;
 left:538px;
3
user734063

この問題を解決するには、position：relativeの前にfloat：leftを指定します。 top、leftの代わりにmargin-left、margin-topプロパティも使用します。

2
ibsenv

次のコードのように、相対的な要素のトップを親のフォントサイズに設定します。

ヒスイテンプレートのhtml：

div.dialog(id='login')
        div.dialog-header
            span.title login
            a.dialog-close(href="")  X
            hr
        div.dialog-body
            p hello this is body
            hr
        div.dialog-footer
            p this is footer

およびcss：

    .dialog
    {
        height: 100%;
        position: absolute;
        top: -100%;
        right: 50%;
        left: 50%;
        bottom: 100%;
        border: 2px solid rgba(255, 255, 255,1);
        border-radius: 3px;
        font-size: 14px;

    }   
.dialog-body{
        position: relative;
        background-color: #F99;
        height: 80%;
        top: -14px;
    }
    .dialog-header{
        position: relative;
        height: 10%;
        background-color: #F9F9F9;

    }
    .dialog-footer{
        position: relative;
        height: 10%;
        top: -28px;
        background-color: #F9fdf9;

    }

これは私のために働いた！

0
Ali mohammadi