Html 组织三个部门_Html_Css - Fatal编程技术网

Html 组织三个部门

html css

Html 组织三个部门,html,css,Html,Css,我想了很久，但还是不知道。将div1和div2放在div左侧，将div3放在div右侧 div1 div3 div2 像这样的 body { text-align: center; } #page { margin: 0 auto; width: 960px; text-align: left; } #content-primary { float: right; width: 60%; height:100%; } #content-secondary

我想了很久，但还是不知道。

将div1和div2放在div左侧，将div3放在div右侧

div1   div3
div2

像这样的

body { 
 text-align: center; 
} 
#page { 
 margin: 0 auto; 
 width: 960px; 
 text-align: left; 
} 
#content-primary { 
 float: right; 
 width: 60%;
 height:100%;
} 
#content-secondary { 
 float: right; 
 width: 20%;
 height:100%;
}


第一组
第3组
第2组
.1、.3{
浮动：左；
}
.三{
左边距：10px；
}
.二{
清除：左；
}

你的意思是这样的：

代码：


第一组
第3组
第2组

看一看。

在第一个div和一些css之后放置一个

您可以使用html表定位这些div

是否在选项周围移动div？请记住编写有效的标记=>关闭标记（）并检查属性（class=“group”）

<html><body> 
   <div id="page">  
     <div id="content-primary">
       <div class="div1"></div>
       <div class="div2"></div>
     </div> 
     <div id="content-secondary">
       <div class="div3"></div>
     </div> 
   </div> 
 </body> 
</html>

body { 
 text-align: center; 
} 
#page { 
 margin: 0 auto; 
 width: 960px; 
 text-align: left; 
} 
#content-primary { 
 float: right; 
 width: 60%;
 height:100%;
} 
#content-secondary { 
 float: right; 
 width: 20%;
 height:100%;
}

<div class="group">
    <div class="one">div 1</div>
    <div class="three">div 3</div> 
    <div class="two">div 2</div>
</div>

.one, .three{
    float:left;
}
.three{
    margin-left:10px;
}
.two{
    clear:left;
}

  <div class="group">
    <div class="1" style="float:left;border:1px solid;">div 1</div>
    <div class="3" style="border:1px solid red;">div 3</div>
    <div class="2">div 2</div> 
  </div>