3

display:inline-block3列を構築するために使用しようとしています。

最初は問題なく動作しますが、最初の列にコンテンツを追加すると、残りのレイアウトに影響を与え、残りの列を下位レベルでレンダリングします。

これを避けるにはどうすればよいですか？

.cont {
  width: 500px;
  height: 200px;
  background: #666666;
}
.col {
  display: inline-block;
  width: 30%;
  background: pink;
}
<div class="cont">
  <div class="col">
    test<br><br><br>
  </div>
  <div class="col">
    col2
  </div>
  <div class="col">
    col3
  </div>
</div>

4

2 に答える 2

11

vertical-align: top;列を上部に垂直に揃える CSS 宣言を追加する必要があります。

.cont span {
    display: inline-block;
    vertical-align: top;     /* Vertically align the inline-block elements */
    height:100%;
    line-height: 100%;
    width: 33.33%;           /* Just for Demo */
    outline: 1px dashed red; /* Just for Demo */
}

こちらがオンラインデモです。

正直なところ、私は を使用inline-blockしてページに列を作成するのが好きではありません。それらの間に空白があるからです。

はfloatしばらく使用されていましたが、最近ではflexボックスまたは CSSgridがオプションになる可能性があります。

于 2013-06-17T19:00:41.893 に答える