2盒子里的盒子里面的CSS

Question

我想要一个人给我提供一个有效的CSS，它可以把2个盒子放在一个盒子里面。 像图像中我已经给

CSS

<style type="text/css"> 
      #adbox { 
       width: 602px; 
       height: 250px; 
       border-width: 0; 
       border-color: red; 
      } 
      #adbox .adbox1 { 
       width: 300px; 
       height: 250px; 
       border-width: 0; 
       border-color: red; 
       } 
      #adbox .adbox2 { 
       width: 300px; 
       height: 250px; 
       border-width: 0; 
       border-color: red; 
     } 
    </style> 

HTML

<div align=center><div id="adbox"> 
<div class="adbox1"> 
<img src="foobar1.jpg" border="0" /> 
</div> 
<div class="adbox2"> 
<img src="foobar.jpg" border="0" /> 
</div> 
</div></div> 

Answer 1

我会猜测你想对齐你提供的图像中的方框。

你可以用这个CSS这样做：

#adbox { 
    width: 600px; 
    height: 250px; 
    border: 1px red solid; 
} 

#adbox .adbox1, #adbox .adbox2 { 
    width: 300px; 
    height: 250px; 
    float: left; 
    outline: 1px red solid; 
} 

例子：http://tinkerbin.com/5MAX3Mt2

Answer 2

Well..You没有问这个问题....我假设你想把两个盒子放在一起，我根据我的假设提供答案。改变你的HTML和CSS如下，如果你想通过侧到两个箱侧放置

还要注意“清除”类清除漂浮物的使用

HTML

<div align=center><div id="adbox"> 
<div class="adbox1"> 
<img src="foobar1.jpg" border="0" /> 
</div> 
<div class="adbox2"> 
<img src="foobar.jpg" border="0" /> 
</div> 
<div class="clear"/> 
</div></div> 

CSS

#adbox { 
      width: 602px; 
      height: 250px; 
      border-width: 0; 
      border-color: red; 
     } 
     #adbox .adbox1 { 
      width: 300px; 
      height: 250px; 
      border-width: 0; 
      border-color: red; 
      float:left; 
      } 
     #adbox .adbox2 { 
      width: 300px; 
      height: 250px; 
      border-width: 0; 
      border-color: red; 
      float:left; 
    } 
    .clear{ 
     clear:both; 
    }