Html 在右侧添加div

所以我有一个愚蠢的问题，我怎么才能让我的div在右边？我有主要内容，但我需要在右侧设置四个div。它看起来像，我需要添加div1-4。我是否应该添加

宽度：100%；浮动：左
在
主容器中

问题#2-我想将main_info1-3分组到一个div下，比如main，这样我就可以在css中使用
.main
，最大宽度为900px；溢出：隐藏；左边距：20px所有div的属性，无需重复，但当我这样做时，main_info2会跳起来并忽略main_info1列表。谢谢

HTML:

我觉得你是个新手。你应该努力掌握HTML和CSS。：）

然而，这里有一个解决方案。请仔细检查。希望你能得到答案


*{
保证金：0；
填充：0；
框大小：边框框；
}
img{
显示：块；
}
.clearfix:之后{
内容：“；
可见性：隐藏；
显示：块；
身高：0；
明确：两者皆有；
}
.包装纸{
最小宽度：1000px；
最大宽度：1360px；
保证金：0自动；
填充：0 20px；
}
.title_容器{
填料顶部：50px 0 30px；
}
.title_容器h1{
线高：66px；
}
·小型楼宇{
高度：55px；
溢出：隐藏；
边缘底部：20px；
字体大小：30px；
字号：100；
线高：52px；
颜色：#fff；
}
.小区块>分区{
身高：继承；
浮动：左；
左侧填充：20px；
}
.小街区。街区1{
背景：#390b5d；
宽度：66.111111%；
}
.小街区。街区2{
宽度：33.88889%；
背景：#e26c34；
}
.内容{
/*高度：377px*/
溢出：隐藏；
边缘底部：60px；
}
.content>div img{
宽度：100%；
高度：自动；
}
.content.image1{
浮动：左；
宽度：29.77777.8%；
}
.content.image2{
浮动：左；
宽度：70.2222%；
左侧填充：10px；
}
.主集装箱{
宽度：68.181818%；
浮动：左；
}
.main_信息{
边缘底部：60px；
背景#d7d7d7；
}
.main_信息头{
左侧填充：20px；
背景：#000；
颜色：#fff；
}
.main_info h2{
高度：34px；
线高：34px；
}
.main_信息主体{
填充：20px；
}
.侧边栏{
宽度：31.818182%；
左侧填充：20px；
浮动：对；
}
.侧边栏{
最小高度：150px；
边缘底部：20px；
填充：20px；
背景：#000；
颜色：#fff；
}

标题
第一区
第2区
主信息-1 h2
主要信息1
主信息-2 h2
主要信息2
主信息-3 h2
主要信息3
第一组
第2组
第3组
第4组
您要移动的四个div是哪四个？检查我附加的图像，右侧有四个正方形div1-4。我不想移动它们，我想创建它们，但我不知道如何创建它们，使它们显示在顶部而不是主要内容下。您应该查看一些网格框架。有一个很好的。看起来你要的是两列布局。Bootstrap很好，但这不是一个网站，只是一个简单的单页html，所以太复杂了。很酷，谢谢你！当然，我是一个新手，我想当我问了一个关于如何让DIV靠右的愚蠢问题时，这一点很清楚：）我有几个问题tho:1。在Main Info-3中，我有两个相邻的列表，带有
float
，但它不再工作了，有什么问题吗？它在
.main\u info3 ul
的某个地方。CSS:
.main_info3 ul{float:left；width:420px；}
2。为什么要将
最小宽度
放在
.wrapper
中，它是用于较小的设备吗？继续问题#1-它肯定是
浮动：左
故障。但是我如何让这些列表彼此相邻，而不是在没有浮动的情况下第二个列表？实际上，您的
ul
不是50%宽。它比这更宽。谷歌搜索框模型和CSS框大小，了解如何计算元素的宽度。（还有身高）。同样，如果使用50%的宽度，则不能使用左边距是的，可以使用
width:48.839%但为什么它会忽略背景？您可以在JSFIDLE中看到列表应该位于最暗的背景上，紫色部分用于下一部分。看起来，即使在下一节中，
float
仍然有效。这是
float
属性的行为。如果父项没有浮动，而子项有浮动，则父项将不会与子项一起成长。您应该做一些功课来查找
float
属性的其他行为。尝试
<div class="main_container">
<div class="title_container">
    <h1>Title</h1>
</div>
<aside>
<div class="small_blocks">
    <div class="block1">
        <span>Text</span>
    </div>
    <div class="block2">
        <span>Text</span>
    </div> 
</div>   
</aside>
<div class="content clearfix">
    <div class="image1">
        <img src="img/img1.jpg">
    </div>
    <div class="image2">
        <img src="img/img2.jpg">
    </div>
</div>
<div class="main_info">
    <h2>Title</h2>
    <p>Text</p>
</div>
<div class="main_info2 clearfix">
    <h2>Title</h2>
    <ul>
    <li>
    <p>Text</p>
    </li>
    </ul>
</div>
<div class="main_info3 clearfix">
    <h2>Title</h2>
    <p>Text</p>
</div>
</div>

.main_container {
  width: 1360px;
  margin: 0 auto;
  background: url("../img/bg.jpg") left top no-repeat;
  background-color: #0c0334;
}

.title_container {
  display: table;

}

.title_container h1 {
  float: left;
  display: table-cell;
  vertical-align: top;
  margin-top: 50px;
  margin-left: 20px;
  line-height: 66px;

}

.small_blocks {
  min-width: 900px;
  overflow: hidden;
}

.small_blocks div {
  height: 55px;
  margin-top: 30px;
}

.small_blocks .block1 {
  float: left;
  margin-left: 20px;
  background: #390b5d;
  width: 595px;
  line-height: 52px;
}   

.small_blocks .block1 span {
  font-size: 30px;
  padding-left: 20px;
  font-weight: 100;
}

.small_blocks .block2 {
  float: left;
  width: 285px;
  background: #e26c34;
  padding-left: 20px;
  line-height: 52px;
  vertical-align: middle;
}

.small_blocks .block2 span {
  font-size: 30px;
  padding-left: 10px;
  font-weight: 100;
  vertical-align: middle;
  display: inline-block;
}

.clearfix:after { 
  content: "";
  visibility: hidden;
  display: block;
  height: 0;
  clear: both;
}

.content {
  width: 900px;
  height: 377px;
  overflow: hidden;
  margin: 20px 0 0 20px;
}

.content .image1 {
  float: left;
  width: 268px;
}

.content .image2 {
  float: left;
  margin-left: 10px;
  width:100%;
  max-width: 622px;
}

.main_info {
  max-width: 900px;
  overflow: hidden;
  margin-top: 60px;
  margin-left: 20px;  
}

.main_info h2 {
  height: 34px;
  border-bottom: 1px solid #390b5d;
}

.main_info2  {
  max-width: 900px;
  overflow: hidden;
  margin: 60px 0px 0px 20px;
  background: #110321;
}   

.main_info2 h2 {
  background: #390b5d;
  min-height: 55px;
  width: 880px;
  padding-left: 20px;
  height: 34px;
  color: #fff;
  line-height: 52px;
}

.main_info3  {
  max-width: 900px;
  overflow: hidden;
  margin: 60px 0px 0px 20px;
  background: #390b5d;
}   

.main_info3 h2 {
  min-height: 55px;
  width: 880px;
  padding-left: 20px;
  height: 34px;
  color: #fff;
  line-height: 52px;
}