1つのインラインブロックの垂直方向の配置は、その隣接するインラインブロックにどのように影響しますか？

私はcssのvertical alignプロパティを理解しようとしています。スパンのみにvertical-align = bottomを設定すると、下に移動します。 divでも同じことが起こります。しかし、私がvertical-align = bottomをpだけに設定すると、divとspanの両方が動きます。この動作は、下に添付されている画像に取り込まれています。1つのインラインブロックの垂直方向の配置は、その隣接するインラインブロックにどのように影響しますか？

マイHTML：

<html> 

<head> 
    <title> 
    </title> 
</head> 

<body> 
    <span>span1</span> 
    <div>div1</div> 
    <p>paragraph A</p> 
</body> 

</html>

MY CSS：上記画像における

span { 
    height: 50px; 
    width: 75px; 
    background: #00FF00; 
    display: inline-block; 
    vertical-align: ; 
} 

div { 
    height: 100px; 
    width: 50px; 
    background: #00FFFF; 
    display: inline-block; 
    vertical-align: ; 
} 

p { 
    height: 200px; 
    width: 200px; 
    background: #FF00FF; 
    display: inline-block; 
    vertical-align: bottom; 
}

は、唯一の垂直alignプロパティは、指定された因子の上記およびコードだけで変更されています。ケース2を参照してください：pに設定してdivとspanの両方で位置を変更しても

出典

2016-08-19 MAG

あなたの修正された例を作成しました。 wrapper divを追加して、アイテムを整列している線のエッジを正確に表示しました。

私はまた、vertical-alignが割り当てられていないアイテムを残しておきました。クリックすると、兄弟からプロパティが削除され、クリックしたアイテムにvertical-align: bottomが追加されます。

我々は理由が今私のp.bigはコンテナラインの完全な高さを占めるので、合わせるには本当に何もないされてあなたの元pということであることがわかります。 vertical-alignを適用すると、のすべての兄弟がにも影響します。

それ以外の場合は、ドキュメントとして動作し、行に対して相対的に位置が調整され、他の要素には影響しません。

$(document).ready(function(){ \t $('span, .el, p').click(function(e){ \t $('span, .el, p').removeClass("v-bottom"); $(this).addClass("v-bottom"); }) })

.wrapper{ border-top:1px dashed; border-bottom:1px dashed; } span, div.el, p{ padding: 0; margin: 0; line-height: 1; } span { height: 50px; width: 75px; background: green; display: inline-block; } div.el { height: 100px; width: 50px; background: yellow; display: inline-block; } p.big { height: 200px; width: 200px; background: blue; display: inline-block; } p.small { height: 50px; width: 100px; background: red; display: inline-block; } .v-bottom{ vertical-align: bottom; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="wrapper"> <span>span1</span> <div class="el">div1</div> <p class="big">paragraph A</p> <p class="small">paragraph A</p> </div>

出典

2016-08-19 15:13:02

私は青色の段落をクリックすると、黄色のdivが一番下まで移動します。しかし、なぜ緑の色のスパンと赤の段落も底に移動していない？ – MAG

1つのインラインブロックの垂直方向の配置は、その隣接するインラインブロックにどのように影響しますか？

答えて

関連する問題