Question

我有这个HTML脚本：

<div id="header">&nbsp;</div>
<div id="top_position">&nbsp;</div>
    <div id="container">

        <div id="messages" class="span_9_of_12 element">
            <div class="msg_cont">
                <div class="msg">
                    <p>Hi!</p>
                </div>
                <div class="msg">
                    <p>Hi!</p>
                </div>
                <div class="msg">
                    <p>Hi!</p>
                </div>
            </div>

        <div id="sidebar" class="span_3_of_12 element" style="float:right;">
            <div class="sidebar_cont">
                <div class="sidebar_el">
                    <p>Hi again!</p>
                </div>
                <div class="sidebar_el">
                    <p>Hi again!</p>
                </div>
            </div>
        </div>
    </div>
</div>

这个CSS代码：

*{
    margin: 0px;
    padding: 0px;
}
body {
    background: white;
    font-size:13px;
    color: #4f5f6f;
    display: block;
}

div{
    display:block;
}

#header{
    width: 100%;
    height: 50px;
    background-color: black;
    color: #FFF;
    position:fixed;
    top: 0;
    left: 0;
    border-bottom: 1px solid #475564;
}

#container{
    border-bottom: 0;
    width: 100%;
    margin: 0 auto;
    max-width: 920px;
    overflow: hidden;
}

.element{
    position:relative;
    float:left;
}

/*  GRID OF TWELVE   ============================================================================= */

.span_9_of_12 {
    width: 74.6%;
}

.span_3_of_12 {
    width: 23.8%;
}

/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
    .span_9_of_12 {
        width: 100%; 
    }
    .span_3_of_12 {
        width: 100%;
    }
}

.msg_cont {
    padding: 0 20px 10px 10px;
}

.msg{
    box-shadow: 0px 1px 1px #CCC;
    border: 1px solid #BFBFBF;
    background: black;
    color: white;
    border-radius: 3px;
    overflow: auto;
}

.sidebar_cont{
    padding: 0 10px 10px 0;
}

.sidebar_el{
    box-shadow: 0px 1px 1px #CCC;
    border: 1px solid #BFBFBF;
    background: black;
    color: white;
    border-radius: 3px;
    overflow: auto;
}

#top_position{
    width: 100%;
    height: 80px;
}

我需要做的是将#messages设为左列，将#sidebar设为右列。我尝试了许多解决方案，例如float，display: block等，但我无法解决这个问题。

我需要保持HTML原样。任何人都知道我能做些什么来使这个工作？

JSFiddle - 你可以在这里找到我的剧本。我只需要做“嗨再来！” divs的父母留在“嗨！”的右边。 divs的父级（#messages旁边的#sidebar），只要屏幕宽度大于480px。

Answer 1

问题似乎是#messages是#sidbear的父母

您只需对HTML进行小幅调整即可

<div id="header">&nbsp;</div>
<div id="top_position">&nbsp;</div>
<div id="container">
<div id="messages" class="span_9_of_12 element">
    <div class="msg_cont">
        <div class="msg">
            <p>Hi!</p>
        </div>
        <div class="msg">
            <p>Hi!</p>
        </div>
        <div class="msg">
            <p>Hi!</p>
        </div>
    </div>
</div>
<div id="sidebar" class="span_3_of_12 element" style="float:right;">
    <div class="sidebar_cont">
        <div class="sidebar_el">
            <p>Hi again!</p>
        </div>
        <div class="sidebar_el">
            <p>Hi again!</p>
        </div>
    </div>
</div>
</div>

查看此更新的fiddle

Answer 2

<div class="leftsidebar">
PUT YOUR CONTENT HERE         
  </div>

  <div class="content"> 
  </div>

CSS

.leftsidebar {
float: left;
width: 180px;
background-color: #EADCAE;
padding-bottom: 10px;
display: block;
}


.content {
padding: 15px;
width: 640px;
float: left;
   }

.container {
width: 1000px;
background-color: #EADCAE;
margin: 0 auto;
}

Answer 3

按照我的意思......你需要这个..检查这段代码..

<div id="header">&nbsp;</div>
<div id="top_position">&nbsp;</div>
    <div id="container">

        <div id="messages" class="span_9_of_12 element">
            <div class="msg_cont">
                <div class="msg">
                    <p>Hi!</p>
                </div>
                <div class="msg">
                    <p>Hi!</p>
                </div>
                <div class="msg">
                    <p>Hi!</p>
                </div>
            </div>

        <div id="sidebar" class="span_3_of_12 element" style="float:none;padding-left:10px;">
            <div class="sidebar_cont">
                <div class="sidebar_el">
                    <p>Hi again!</p>
                </div>
                <div class="sidebar_el">
                    <p>Hi again!</p>
                </div>
            </div>
        </div>
    </div>
</div>

如果我错了，那就告诉我......我会尽力帮助......：）

2列CSS彼此相邻

3 个答案: