Question

我有这个HTML：

<div id="cont">
   <div class="chatarea">
      <div class="row">
         <div class="message">
            <div class="nick">
               <p>Some Nick</p>
            </div>
            <p>Some Message</p>
            <div class="timestamp"><p>Some Timestamp</p></div>
         </div>
      </div>
   </div>
</div>

和这个CSS：

#cont {
    width:100%;
    text-align:center;
}
.chatarea
{
    display: table;
    height : 100%;
    padding-top:50px;
    margin:0px;
    width:80%;
}

.nick
{
    width: 400px;
    border-right-style: solid;
    text-align: center;
    height:100%; position:absolute; top:0; left:0;
}

.timestamp
{
    width: 400px;
    border-left-style: solid;
    position:absolute; top:0; right:0; height:100%;
}

.message
{
    border-style: solid;
    padding:0 50px 0 140px;
    overflow:hidden;
    position:relative;
}

我试图在页面中央显示3个div（左右小于中心的一个）。浏览器宽度的80％。

我在这里做了一个小提琴：http://jsfiddle.net/zQ9pu/

我有点麻烦 - 最好的办法是什么？

Answer 1

添加

.chatarea
{
display: table;
height : 100%;
padding-top:50px;
margin:0px auto;
width:80%;
}

工作正常!!这是你的新小提琴http://jsfiddle.net/zQ9pu/2/

Answer 2

包含具有指定宽度的父块级元素中的div，然后在其上应用CSS margin-left: auto; margin-right: auto;。

显示3个水平div中心页面

2 个答案: