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

嗯..你没有问这个问题....我假设你想将两个盒子并排放置，我根据我的假设提供答案。如果您想将两个框并排放置，请按如下方式更改 html 和 css

另请注意“clear”类的用法，该类会清除浮动

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