0

当谈到 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”文本显示在页面的左侧。我已将#right-side 的显示设置为 inline-block，希望它显示在“Hello center”div 旁边，但它似乎没有生效。谁能看到我在这里缺少的东西？

4

4 回答 4

0

使用您的右侧 div 宽度稍小然后它显示在同一列中

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

看演示

于 2012-12-27T07:33:51.450 回答
0

float:left与_display: inline-block

于 2012-12-27T07:34:20.390 回答
0

由于元素是内联渲染的，HTML 代码中的空格会影响渲染。由于您的 s 之间有空格div，因此浏览器将在它们之间渲染几个像素的空格。

如果您想使用inline-blockwithout ，解决方案是删除每个结束标记和开始标记float之间的空格，如他的：</div><div>

<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/

于 2012-12-27T07:37:25.737 回答
0

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

于 2012-12-27T07:38:10.713 回答