html - 不适合 1 行的 3 个 div

Question

我想将一行分成 3 部分:20%、60% 和 20%。但由于某种原因，总宽度超过 100%，最后一个元素显示在新行上。问题是什么？我将 margin 0 和 padding 0 添加到所有三个。并且 20% + 60% + 20% = 100%

CSS:

#text_area_row
    {
        position:relative;
        font-size:80px;
        width:auto;
        cursor:default;
        top:10%;
        margin: 0;
        padding:0;
    }
    #text_area_center
    {
        text-align:center;
        display:inline-block;
        margin:0;
        padding:0;
        width:60%;
        overflow:hidden;
    }
    #center_div
    {
        margin:0 auto;
    }
    #text_area_left
    {
        text-align:left;
        position:relative;
        display:inline-block;
        opacity:0.5;
        filter: alpha(opacity=50);
        width:20%;
        margin:0;
        padding:0;
        overflow:hidden;
    }
    #text_area_right
    {
        position:relative;
        text-align:right;
        display:inline-block;
        opacity:0.5;
        filter: alpha(opacity=50);
        width:20%;
        margin:0;
        padding:0;
        overflow:hidden;
    }

HTML:

<div id='text_area_row'>
                <div id='text_area_left'>
                        <div class="card_style"></div>
                </div>
                <div id='text_area_center'>
                    <div id='center_div'>
                        <div class="card_style"></div>
                    </div>
                </div>
                <div id='text_area_right'>
                        <div class="card_style"></div>
                </div>


            </div>

Answer 1

问题是空白，因为您已经将 div 元素设为 display:inline-block

您可以通过删除那些 div 标签之间的空格来压缩您的 html..

<div id='text_area_left'>
    <div class="card_style"></div>
</div><div id='text_area_center'>
        <div id='center_div'>
            <div class="card_style"></div>
        </div>
</div><div id='text_area_right'>
        <div class="card_style"></div>
</div>

---

另一个技巧(如果你想保持代码格式)是注释掉空白

<div id='text_area_left'>
        <div class="card_style">1</div>
</div><!--
--><div id='text_area_center'>
    <div id='center_div'>
        2
    </div>
</div><!--
--><div id='text_area_right'>
        <div class="card_style">3</div>
</div>

演示在 http://jsfiddle.net/xYdWq/