Question

我想将一行分成3部分：20％，60％和20％。但由于某种原因，总宽度超过100％，最后一个元素是新线上的diplayes。问题是什么？我将余量0和填充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/

演示

Answer 2

将float:left用于divs text_area_left，text_area_center，text_area_center
这里是您的演示http://jsfiddle.net/N6fwu/

3 div不适合1行

2 个答案: