部门标签代理服务 [英] Division tag acting weired

问题描述

我在屏幕上制作了三个盒子，借助分区标签，宽度分别为19％，38％，40％，所有这些都加起来为97％。我希望所有这些都是并排的，所以我使用display：inline-block，所有这些都表现得很完美，我希望在这里：编辑小提琴 - JSFiddle [ ^ ]



但是当我在这些分区标签中添加一些内容时，boc无缘无故地向下移动。





如果我在右侧框中添加内容：编辑小提琴 - JSFiddle [ ^ ]



当我添加这些盒子时，就会发生这种情况。



我尝试了什么：

I have made three boxes on my screen with the help of division tags with width 19%, 38%, 40% all of them add up to 97%. I want all of them to be side by side so I used display: inline-block and all of them act perfectly as I wish to like here: Edit fiddle - JSFiddle[^]

But the moment I add something in these division tags the boc moves down for no reason.


If I add something in right box : Edit fiddle - JSFiddle[^]

This happens the moment I add something do these boxes.

What I have tried:

<div class="wrapper-details-page">
    <div class="wrapper-details-page-left">  </div>
    <div class="wrapper-details-page-middle">  </div>
    <div class="wrapper-details-page-right">  </div>
</div>

.wrapper-details-page-left {
  border: 1px solid black;
  min-height: 600px;
  width: 19%;
  display: inline-block;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
}

*{
  background-color: skyblue;
}

.wrapper-details-page-middle {
  border: 1px solid black;
  min-height: 600px;
  width: 38%;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  display: inline-block;
  background-color: pink;
}

.wrapper-details-page-right {
  border: 1px solid black;
  min-height: 600px;
  width: 40%;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  display: inline-block;
}

推荐答案

将 vertical-align：top 添加到内联块元素。

Add vertical-align:top to your inline-block elements.

html,
body {
    background-color: skyblue;
}

.wrapper-details-page > div {
    border: 1px solid black;
    min-height: 600px;
    display: inline-block;
    vertical-align: top;
    margin: 0;
    padding: 0;
}

.wrapper-details-page-left {
    width: 19%;
}

.wrapper-details-page-middle {
    width: 38%;
    background-color: pink;
}

.wrapper-details-page-right {
    width: 40%;
}

更新的演示 [ ^ ]



对于现代浏览器，您可能需要考虑使用Flexbox进行布局：

Updated demo[^]

For modern browsers, you might want to consider using Flexbox for the layout:

@supports (display:flex){
    .wrapper-details-page {
        display: flex;
    }
    .wrapper-details-page > div:last-child {
        flex-grow: 1;
    }
}

使用Flexbox演示 [ ^ ]

逐步增强CSS布局：来自浮动到Flexbox到网格 - 粉碎杂志 [ ^ ]

这篇关于部门标签代理服务的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！