鍍金池/ 問答/HTML5  HTML/ inline-block為什么沒有對齊而是換行了？

inline-block為什么沒有對齊而是換行了？

想要左右兩個高度不同的div水平排列

然后我給兩個div設(shè)置了display:inline-block,奇怪的是右邊的div居然換行了，按理說兩個div應(yīng)該頂部對齊的??？很疑惑這是為什么？

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div class="left">
    <p>這是為什么呢？</p>
  </div>
  <div class="right">
    <p>求一個答案求一個答案求一個答案求一個答案求一個答案求一個答案求一個答案求一個答案求一個答案求一個答案求一個答案求一個答案求一個答案求一個答案求一個答案求一個答案求一個答案求一個答案求一個答案求一個答案求一個答案求一個答案求一個答案求一個答案求一個答案求一個答案求一個答案求一個答案求一個答案</p>
  </div>
</body>
</html>

CSS

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

.left{
  display:inline-block;
  width:160px;
}
.right{
  display:inline-block;
  margin-left:180px;
}

實際效果

圖片描述

期望效果

圖片描述

在線demo

這個簡單的小問題

回答
編輯回答
使勁操

width啊 你第二個P標(biāo)簽設(shè)置一個width度

2017年2月19日 08:20
編輯回答
礙你眼

inline-block默認的寬度是auto，意思就是寬度隨內(nèi)容增加而增寬，隨瀏覽器寬度而換行。

所以這個例子中right要設(shè)置寬度，不設(shè)置寬度，會根據(jù)內(nèi)容的情況撐開。內(nèi)容不夠，還能一行，內(nèi)容足夠的情況下，會占據(jù)100%的寬度，那時就換行了

*{
      margin:0;
      padding:0;
      box-sizing:border-box;
    }

    .left{
      display:inline-block;
      width:160px;
    }
    .right{
      display:inline-block;
      width: calc(100% - 180px);
      padding-left: 20px;
    }
    .left, .right{
      vertical-align: text-top;
    }
2017年7月14日 08:17
編輯回答
夏夕

因為你里面是一個p塊級元素，況且你 還加了margin-left:180px;一行放不下，肯定換行了，你試著刪掉margin-left 減少第二個p里面的內(nèi)容看看。最簡單的不用寫成 inline-block;直接一個左浮動，一個右浮動

2017年5月6日 09:15