Question

我努力让我的侧边栏坐在我的内容旁边。基本上我的内容不会坐在我的侧边栏旁边。它可以工作，如果我没有长文本，但否则它只是下到下一行。我将不胜感激任何帮助。

这是问题的图片：

http://coderdojo.co/inverclyde/dojo14/picture/problem.png

这是我的HTML

    <!-- All Content -->
    <div class="content">

        <!-- Main Content -->
        <div id="main_content">
            <h3>Lorem Ipsum</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium odio vitae erat pharetra eleifend. Sed in consectetur odio, vel venenatis nunc. 
                Sed felis sapien, ullamcorper eget arcu eget, consectetur posuere nisl. Ut blandit metus quis lectus ultricies, eu dignissim mauris rhoncus.
                Aliquam est libero, molestie eget lacus ac, luctus interdum enim. Nulla ac dapibus tellus, in bibendum leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                Mauris in mi lorem. Vivamus nec risus nec nisi tempus bibendum ut eget mi. Phasellus eget luctus massa. 
               Vivamus et libero turpis.
            </p>

        </div>

        <!-- Sidebar -->
        <div id="sidebar">
        <!-- Sidebar Search -->
            <form class = "search" method="get" action="">
                <input class = "search_box" type="text" value="Search..." onfocus="if(this.value=='Search...')this.value=''"; onblur="if(this.value=='')this.value='Search...';" >

                <input class = "search_submit" type = "submit" value = "Search">
            </form>
            <!-- Sidebar Menu -->
            <ul id="sidebar_menu">           
                <li><a id="" href="#">Link 1</a>
                <li><a id="" href="#">Link 2</a>
                <li><a id="" href="#">Link 3</a>
                <li><a id="" href="#">Link 4</a>
                <li><a id="" href="#">Link 5</a>
                <li><a id="" href="#">Link 6</a>
                <li><a id="" href="#">Link 7</a>
                <li><a id="" href="#">Link 8</a>
            </ul>          
        </div>
    </div>

这是我的CSS

#content {
width: 80%;
background-color: #C54099;
margin-top: 140px;
}

#main_content {
float: left;
margin: 10px;
margin-right: 310px;
padding: 5px;

}


#sidebar {
float: right;
margin: 10px;
margin-top: 0;
width: 300px;
height: 100%;
background: #585858;

}

#sidebar_menu {
margin: 20px;
}

#sidebar_menu li {
list-style-type: none;
margin: 10px;
padding-bottom: 10px;
border-bottom: 1px dotted #DDD;


}

#sidebar_menu li a{
text-decoration: none;
}

.search {
margin: 5px auto 5px auto;
}

Answer 1

您已使用#main_content设置width: ;。浏览器会忽略这一点......

尝试更改此css：

#main_content {
    float: left;
    margin: 10px;
    margin-right: 310px;
    padding: 5px;
    width: 500px;
}
#sidebar {
    float: right;
    margin: 10px;
    margin-top: 0;
    width: 300px;
    height: 100%;
    background: #585858;
}

JSFIDDLE

Answer 2

你必须设置width，以便像弗朗西斯科所说的那样容纳左边的主要内容。

否则，如果你想让它自动调整，那么你应该首先在html中添加侧边栏。

HTML：

<div class="content">

    <!-- Sidebar -->
        <div id="sidebar">
        <!-- Sidebar Search -->
            <form class="search" method="get" action="">
                <input class="search_box" type="text" value="Search..." onfocus="if(this.value=='Search...')this.value=''" ;="" onblur="if(this.value=='')this.value='Search...';">

                <input class="search_submit" type="submit" value="Search">
            </form>
            <!-- Sidebar Menu -->
            <ul id="sidebar_menu">           
                <li><a id="" href="#">Link 1</a>
                </li><li><a id="" href="#">Link 2</a>
                </li><li><a id="" href="#">Link 3</a>
                </li><li><a id="" href="#">Link 4</a>
                </li><li><a id="" href="#">Link 5</a>
                </li><li><a id="" href="#">Link 6</a>
                </li><li><a id="" href="#">Link 7</a>
                </li><li><a id="" href="#">Link 8</a>
            </li></ul>          
        </div><!-- Main Content -->
        <div id="main_content">
            <h3>Lorem Ipsum</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium odio vitae erat pharetra eleifend. Sed in consectetur odio, vel venenatis nunc. 
                Sed felis sapien, ullamcorper eget arcu eget, consectetur posuere nisl. Ut blandit metus quis lectus ultricies, eu dignissim mauris rhoncus.
                Aliquam est libero, molestie eget lacus ac, luctus interdum enim. Nulla ac dapibus tellus, in bibendum leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                Mauris in mi lorem. Vivamus nec risus nec nisi tempus bibendum ut eget mi. Phasellus eget luctus massa. 
               Vivamus et libero turpis.
            </p>

        </div>



    </div>

CSS :(从float:left删除#main-content）

#content {
width: 80%;
background-color: #C54099;
margin-top: 140px;
}

#main_content {
margin: 10px;      // removed float left!
margin-right: 310px;
padding: 5px;
}

#sidebar {
float: right;
margin: 10px;
margin-top: 0;
width: 300px;
height: 100%;
background: #585858;

}

#sidebar_menu {
margin: 20px;
}

#sidebar_menu li {
list-style-type: none;
margin: 10px;
padding-bottom: 10px;
border-bottom: 1px dotted #DDD;


}

#sidebar_menu li a{
text-decoration: none;
}

.search {
margin: 5px auto 5px auto;
}

我的侧边栏有问题

2 个答案: