使用CSS3 </divs>设置<divs>样式

时间:2012-08-01 20:40:03

标签: html css

我能够根据需要对齐和居中的graphpaper和页脚,但是我无法将colorpicker div存在于这些旁边。无论我尝试什么,它最终都会低于其余部分。有没有办法让两个div垂直居中,然后将colorpicker div放在这两个旁边?

<div id="abstract">
   <div class="graphpaper" id="graphpaper" onclick="getPosition(event)" style="width:984px; height:1100px;">
      <img src="images/poster/poster-top.png" align="left"/>
      <img src="images/poster/poster-left.jpg" align="left" style="margin-left:12px;"/>
      <canvas id ="canvas" width = "898" height = "900"/>
      <img src="images/poster/poster-right.jpg" align="right" style="margin-right:10px;"/>        
</div>
<div class="footer" id="footer">
      <img src="images/poster/poster-bottom.png"/>
</div>
<div class="colorpicker" id="colorpicker" style="width: 70px; clear:both;">
    <img src="images/color-tab/no-color.png" id="unselected" class="unselected"/><br>
    <img src="images/color-tab/color-dark.png" id="dark_image" class="darkimage" 
   onclick="getColor('#00ccff','images/color-tab/color-dark.png')"/><br>
    <img src="images/color-tab/color-medium.png" id="med_image" class="medimage" 
   onclick="getColor('#000000','images/color-tab/color-medium.png')"/><br>
    <img src="images/color-tab/color_light.png" id="light_image" class="lightimage"     
   onclick="getColor('#ff0066','images/color-tab/color_light.png')"/><br><br><br><br>
</div>
</div>

2 个答案:

答案 0 :(得分:2)

为了做到这一点,你需要将所有div放到左边,并给它们加上100%的宽度(即40%,40%,20%)。

这是我最好的猜测,而不会将您的问题视为一个jsfiddle

答案 1 :(得分:0)

1。)删除了页脚div并将img添加到graphpaper div中 2.)将colorpicker设置为position:fixed;并设置margin-top:300;所以它会在适当的地方开始。