如何水平对齐多个div

时间:2013-07-28 11:55:22

标签: css html

这是我迄今为止所做的。

<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向下。 enter image description here

3 个答案:

答案 0 :(得分:0)

啊哈!现在看你的编辑!使用一些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/

希望它有所帮助!

答案 1 :(得分:0)

另一个答案!

如果您只想将div放在彼此之后,可以将它们设置为显示: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> 

答案 2 :(得分:0)

您的代码无法正常工作的原因实际上非常简单。我首先提出了一些其他答案,因为我认为它们是更好的方法。

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

您必须自己设置top:0px

哦..你的代码中也有一些错误,但是只需要我的其他一个答案就可以了,你会没事的。)