inline-block値
これは、使用して、ブラウザの幅を満たし、(ブラウザのサイズが変更されたときに)うまくラップボックスのグリッドを作成するのに長い時間のために可能であったfloat
プロパティを。
しかし、 inline-block
の値display
プロパティは、これがさらに簡単になります。
inline-block要素は、インライン要素に似ていますが、彼らは、幅と高さを持つことができます。
例
古い方法-使用してfloat
(我々はまた、指定する必要が予告clear
浮動ボックスの後に要素のプロパティ):
例
.floating-box {
float: left;
width: 150px;
height: 75px;
margin: 10px;
border: 3px solid #73AD21;
}
.after-box {
clear: left;
}
»それを自分で試してみてください 同じ効果は、使用することによって達成することができますinline-block
の値がdisplay
(ないことに注意してくださいプロパティをclear
プロパティは必要ありません):
例
.floating-box {
display: inline-block;
width: 150px;
height: 75px;
margin: 10px;
border: 3px solid #73AD21;
}
»それを自分で試してみてください