Question

对于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>

看起来很简单，但不幸的是，“Hello right”文本显示在页面的左侧。我已经将＃右侧的显示设置为内联块，期望它显示在“Hello center”div旁边，但它似乎没有生效。谁能看到我在这里失踪的东西？

Answer 1

将右侧div宽度略小，然后显示在同一列

中

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

See Demo

Answer 2

将float:left与display: inline-block

一起使用

Answer 3

由于元素变为内联呈现，HTML代码中的空格会影响渲染。由于div之间有空格，浏览器会在它们之间呈现几个像素的空白区域。

如果您想在没有inline-block的情况下使用float，解决方法是删除每个结束标记</div>和打开<div>标记之间的空白区域，例如：< / p>

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

在此处查看实时操作：http://jsfiddle.net/LbNGq/

Answer 4

试试这个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;
}

右侧div的内联块似乎没有生效

4 个答案: