css - 如何水平对齐多个div

Question

这就是我到目前为止所做的。

<div style="overflow:visible;width:1050px;border:1px solid green;height:50px;margin-left:115px">
<div style="border:1px solid red;position:absolute;width:730px;">

<br/><br/><br/>

<div class=''><div class='tagstyle'>FRESHER</div><div class='tagstyle'>IT JOBS</div><div class='tagstyle'>2013</div><div class='tagstyle'>BANGALORE</div></div>


<!----- left --->

<div>
<div style="border:1px solid blue;height:900px;position:absolute;width:340px;margin-left:735px;">

<!------ right --->
<div>
</div>

问题是，当左侧 div 有任何内容时，右侧 div 会向下。

Answer 1

另一个答案！

如果您只想将 div 一个一个地放置，您可以将它们设置为 display:inline-block，如下所示：

<style>

    .inline {
        display:inline-block;
    }

</style>

<div class="inline">
    Labalodado
    <br/>multiline content
</div>
<div class="inline">
    Less content
</div>
<div class="inline">
    Another div
    <br/>with
    <br/>multiline content
</div> 

Answer 2

您的代码不起作用的原因实际上很简单。我首先提出了其他一些答案，因为我认为它们是更好的方法。

position:absolute 不会自动将项目移动到 {0,0}

你必须top:0px自己设置。

哦..您的代码中也有一些错误，但是只需使用我的其他答案之一，您就会没事的:)

Answer 3

啊哈！现在看到你的编辑了！使用一些 css3 表格显示属性真的很简单，但这在旧浏览器中不起作用。

但是，您可以使用一些简单的 css 来制作带有侧边栏、标题和主要内容的标准博客模板：

<style>
    .body-wrapper {
        position:absolute;
        top:20px;
        left:50%;
        width:900px;
        margin-left:-450px; /* Half the width (negative) */
        background:red;
    }

    .header {
        position:relative;
        width:100%;
        height:100px;
        margin-bottom:10px;
        background:blue;
    }

    .main {
        float:left;
        width:70%;
        background:green;
    }

    .sidebar {
        float:right;
        width:30%;
        background:yellow;
    }
</style>

<div class="body-wrapper">
    <div class="header">
        Header!
    </div>
    <div class="main">
        Content!
    </div>
    <div class="sidebar">
        Sidebar!
    </div>
</div>

这是一个 jsFiddle 作为证明：http: //jsfiddle.net/Kepk9/

希望能帮助到你！