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

Answer 1

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

希望它有所帮助！

Answer 2

另一个答案！

如果您只想将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>

Answer 3

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

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

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

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

如何水平对齐多个div

3 个答案: