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