Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
4.1k views
in Technique[技术] by (71.8m points)

div显示位置不正常

<div class="info-pane" style="
  width: 100%;
  height: 90px;
  margin-bottom: 20px;
  height: 90px;
  background-color: rgba(255,255,0,0.3);">
  <div style="height: 100%; width: 900px; float: left;
      display:inline-block;">
    <div style="
      background-color: #f0f0f0;
      display: inline-block;
      height: 100%;
      margin-right: 20px;
      width: 200px;
      min-width: 200px;
      box-sizing: border-box;">
      first
    </div>
    <div style="
      background-color: #f0f0f0;
      display: inline-block;
      height: 100%;
      margin-right: 20px;
      width: 200px;
      min-width: 200px;
      box-sizing: border-box;
      overflow: hidden;">
      second
    </div>
  </div>
  <div
    style="height: 100%; width: 200px; float: right;
      display:inline-block; background-color: #f0f0f0;">
    right
  </div>
</div>

显示效果如下,first div 被往下挤了一截:

image

外面还有两层div,我没贴上来,应该没影响吧。

请问怎么才能让 first、second、right 水平对齐呢?


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

first那个div也加上overflow: hidden;


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...