html – 在右侧添加div

概述所以我有一个愚蠢的问题,如何让我的div在右侧？我有主要内容,但我需要在右侧设置四个div.它看起来像 this,我需要添加div1 – 4.我应该添加宽度：100％; float：left in .main_container？ 问题#2 – 我想将main_info1 – 3分组在一个div之下,例如main,这样我就可以在css中使用.main,max-width：900px;溢出：隐藏; 所以我有一个愚蠢的问题,如何让我的div在右侧？我有主要内容,但我需要在右侧设置四个div.它看起来像 this,我需要添加div1 – 4.我应该添加宽度：100％; float：left in .main_container？

问题#2 – 我想将main_info1 – 3分组在一个div之下,例如main,这样我就可以在CSS中使用.main,max-wIDth：900px;溢出：隐藏; margin-left：20px;所有div的属性,无需重复,但当我这样做时,main_info2会跳起并忽略main_info1列表.谢谢.

HTML：

<div ><div >    <h1>Title</h1></div><asIDe><div >    <div >        <span>Text</span>    </div>    <div >        <span>Text</span>    </div> </div>   </asIDe><div >    <div >        <img src="img/img1.jpg">    </div>    <div >        <img src="img/img2.jpg">    </div></div><div >    <h2>Title</h2>    <p>Text</p></div><div >    <h2>Title</h2>    <ul>    <li>    <p>Text</p>    </li>    </ul></div><div >    <h2>Title</h2>    <p>Text</p></div></div>

CSS：

.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;}

解决方法 我觉得你是个新手.你应该努力掌握HTML和CSS. 总结

以上是内存溢出为你收集整理的html – 在右侧添加div全部内容，希望文章能够帮你解决html – 在右侧添加div所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。