Question

如何将一个div包裹在另一个div周围？我有以下两个div ID：

#course {
  width: 325px;
  padding-right: 25px;
  border-right: 1px solid #999;
  border-top: 1px solid #999;
}

#home-page-sign-up {
  width: 275px;
  #padding-left: 25px;
  float: right;
  margin: auto;
  #position: relative;
  display: block;
  clear: both;
}

我希望#course位于左侧，而#home-page-sign-up位于其旁边。我确实按照指定的方式左右阻挡，但是一个在另一个之下，我希望它们并排。

我怎样才能实现它？

Answer 1

你想要将它们两个漂浮在左边：

#course{
    float:left;
    width:325px;
    padding-right:25px;
    border-right:1px solid #999;
    border-top:1px solid #999;
}

#home-page-sign-up {
    width:275px;
    #padding-left:25px;
    float:left;
    margin: auto; 
    #position:relative;
    display:block;
}

确保#course首先落入html

Answer 2

试试这个：

#course{
width:325px;
float:left;
padding-right:25px;
border-right:1px solid #999;
border-top:1px solid #999;
}

#home-page-sign-up {
width:275px;
#padding-left:25px;
float:left;
margin: auto; 
#position:relative;
}

然后，在您的身体标签中，执行：

<div id="course">Course Div Content here...</div>
<div id="home-page-sign-up">Home Sign-up Content here...</div>
<div style="clear: left;"></div>

这是一种方式......希望有效;）

Answer 3

我不知道你的意思＆＃34;环绕＆＃34;但是如果你想让divs彼此相邻，那就把float：left;两种风格......

Answer 4

查看代码和演示的小提琴

小提琴：http://jsfiddle.net/t4LUF/3/

演示：http://jsfiddle.net/t4LUF/3/embedded/result/

注意：出于演示目的，我为所有div提供了边框，您可以根据需要进行更改。

HTML：

<div id="big-container">big-container
    <div id="container">
        <div id="course">course Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
        <div id="home-page-sign-up">home-page-sign-up </div>
    </div>
</div>

SS：http://img812.imageshack.us/img812/3783/divcontainersidebyside.jpg

如何将一个div id包装在另一个div id周围？

4 个答案: