0

以下は、内容が同じで問題のある 8 つのフローティング ブロックです。

  • サイドブロック .innerにpadding:10pxを使用して「境界線」を作成すると、うまく機能しません (パディングボトムが消えたように見えます)。
  • ブロックの上にカーソルを置くと、上部に表示されず、他のブロックを移動しません

ブロックをうまく機能させるには？HTML:

<div class="sideblock"><div class="style-menu"><div class="inner">
Everything around you that you call life was made up by people that were no smarter than you, and you can change it, you can influence it, you can build your own things that other people can use.</div></div></div>

CSS:

.sideblock {
    width: 220px;
    height: 80px;
    overflow: hidden;
    margin: 10px;
    float: left;    
}

.sideblock .inner {
    background: #ffffff;
    padding: 10px;}

.sideblock .style-menu {
    padding: 3px;
    background: #157ba1;
    background: linear-gradient(to right,  #157ba1 0%,#5fa31c 100%);}

.sideblock:hover {
    box-shadow:  0px 0px 5px #000;
    overflow: visible;
    height: auto;}

ここに私のコードがあります - http://jsfiddle.net/2HqZV/1/

それはどうだろう

サポートのためのThx

4

1 に答える 1

1

さて、divがホバーされたときと同じ外観を持ちたいと思いますが、それから小さくなりますか?
最初はdiv自体でオーバーフローを使用する必要はありません。指定された高さに応答する必要があります。

要素を調べると、要素の高さを簡単に確認できます。スタイル メニューに継承の高さを追加できることを修正するために、 .style-menudiv の高さが と同じではないことがわかります。.sideblock

.sideblock .style-menu {
     height: inherit;
    padding: 3px;
    background: #157ba1;
    background: linear-gradient(to right,  #157ba1 0%,#5fa31c 100%);
}

さらに詳しく見ると、.innerdiv 要素のパディングが実際に指定された高さを消費していることがわかります。あなたが望むのは、パディングをインラインにすることです。これはbox-sizingで簡単に行うことができます。最後に、次を追加してテキストを「カット」できますoverflow。

.sideblock .inner {
    background: #ffffff;
    padding: 10px;
    height: inherit;
    box-sizing: border-box;
    overflow: hidden;
}

jsフィドル

これがあなたの意図したものであることを願っています。

ところで、境界線を追加するあなたの方法は非常にユニークだと思います ^^

アップデート

したがって、消費するすべての要素が他のすべての要素を無視できるようにするには、その要素をドキュメント フローから除外する必要があります。でこれを行うことができますposition: absolute;。ただし、絶対位置が実際に行うことは、他のすべての要素を無視することですが、同じ位置が必要です。要素にはオフセット位置 (上、右、下、左) がないため、画面の左隅に配置されます (DOM 内の唯一の要素であるかのように動作します)。
要素の位置を維持するために、変更するのでは.sideblockなく、その内容を変更します。.style-menu:

.sideblock:hover .style-menu
{
    box-shadow:  0px 0px 5px #000;
    position: absolute;
}

この要素は他の要素の上にあるため、ここに影を追加します。

.sideblockコンテンツが絶対的になり、ドキュメントフローから外れたため、要素にはコンテンツがありません。これを修正するには、この要素に を与えることができますmin-height:

.sideblock:hover 
{
    min-height: 80px;
    height: auto;
}

jsフィドル

于 2013-10-25T14:57:21.683 に答える