Question

我想知道如何将这两个区块放在彼此旁边，“新闻”和“热门项目”，http://jsfiddle.net/2cQr9/我尝试了几次，但没有成功。

HTML

<div class="topMsg">
    <h2> News</h2>
    <a>lorem</a>
</div>
<div class="popMsg">
    <h2>Popular Projects</h2>
    <h3>Skin Selector</h3>
    <a> Elorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsum</a>
</div>

CSS

body{
    background-color:#000;  
}

a{
    text-decoration:none;
}



.topMsg{

    width:400px;
    margin:100px 50px;
    text-align:justify
}

.topMsg a,.popMsg a{
    color:#FFF; 
    font-family:Arial, Helvetica, sans-serif;
}

.topMsg h2, .popMsg h2{
    color:#069;
    font-size:32px;
}

.popMsg{
    width:250px;
    margin:100px 50px;
    text-align:justify;
}

.popMsg h3{
    color:#028;
}

Answer 1

如果有足够的空间让它们彼此相邻（边距/填充也算作空间！），你可以简单地float:left;它们。

Answer 2

你可以显示：inline-block;到.topMsg和popMsg

 .topMsg{

    width:400px;
    margin:100px 50px;
    text-align:justify;
        display:inline-block;
   }

 .popMsg{

    width:250px;
    margin:100px 50px;
    text-align:justify;
        display:inline-block;
   }

check the fiddle

Answer 3

将此CSS代码添加到元素：

.popMsg{ float:left; }

Answer 4

基本上，DIV元素位于display:block。

您只需要更改“.popMsg”和“.topMsg”div的显示。

.popMsg, .topMsg{
   display:inline; 
   float:left;
}

或

.popMsg, .topMsg{
   display:inline-block;
}

Answer 5

在CSS的末尾添加以下行：

    div.topMsg { float:left; }
    div.popMsg { float:right; }
    div.footer { clear:both; }

现在它的左边＆amp;你想要的就是

CSS / HTML如何将两个块彼此相邻放置

5 个答案: