Css 右侧div的内联块不'；似乎没有起作用

说到CSS，我是个新手。我正在处理一个HTML内容，我希望它看起来像一行中的3列。我有以下嵌入样式的HTML：

<style type="text/css">
    #main {
        width: 100%;
        height: 250px;
    }

    #left-side {
        width: 20%;
        float: left;
        height: 100%;
    }

    #in-the-middle {
        width: 60%;
        text-align: center;
        display: inline-block;
        height: 100%;
    }

    #right-side {
        width: 20%;
        display: inline-block;
        height: 100%;
    }

</style>

<div id="main">

    <div id="left-side" align="left">
        Hello left
    </div>
    <div id="in-the-middle" align="center">
        Hello center
    </div>
    <div id="right-side">
        Hello right
    </div>
</div>

#主要{
宽度：100%；
高度：250px；
}
#左侧{
宽度：20%；
浮动：左；
身高：100%；
}
#中间{
宽度：60%；
文本对齐：居中；
显示：内联块；
身高：100%；
}
#右侧{
宽度：20%；
显示：内联块；
身高：100%；
}
你好，左
你好中心
你好，对吗

---

看起来很简单，但不幸的是，“Hello right”文本显示在页面的左侧。我已经将#right side的显示设置为inline块，希望它显示在“Hello center”div旁边，但它似乎没有生效。有人能看到我在这里遗漏了什么吗？

请使用右侧div width，该宽度稍小，然后显示在同一列中

#right-side {
    width: 19%;
    display: inline-block;
    height: 100%;
}

---

将

float:left

与

display:inline block

一起使用

。由于
div
s之间有空格，浏览器将在它们之间呈现几个像素的空格

如果要使用
内联块
而不使用
浮点
，解决方案是删除每个结束标记
和开始标记
之间的空格，例如：

<div id="left-side">
    Hello left
</div><div id="in-the-middle">
    Hello center
</div><div id="right-side">
    Hello right
</div>


你好，左
你好中心
你好，对吗

请参见此处的实时操作：
尝试此css脚本

<style type="text/css">
#main {
    width: 100%;
    height: 250px;
     display: inline-block;
}

#left-side {
    width: 20%;
    float: left;
    height: 100%;
}

#in-the-middle {
    width: 60%;
    text-align: center;
    display: inline-block;
    height: 100%;
    float:left;
}

#right-side {
    width: 20%;
    display: inline-block;
    height: 100%;
    float:left;
}


#主要{
宽度：100%；
高度：250px；
显示：内联块；
}
#左侧{
宽度：20%；
浮动：左；
身高：100%；
}
#中间{
宽度：60%；
文本对齐：居中；
显示：内联块；
身高：100%；
浮动：左；
}
#右侧{
宽度：20%；
显示：内联块；
身高：100%；
浮动：左；
}

感谢您不仅给出了答案，而且还解释了为什么它没有按我希望的那样出现！