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