如何在同一水平

问题描述:

带内盒我想内两个div被定位为:_________ _________ | | | | | | | | | | | | | _________ | | | | | | _________ |如何在同一水平

现在发生的事情是,当他们都是空的,或者其中的数据是纯文本简单那么它看起来像这只。但是,当我使用
,如果我用更多的边距在他们内部制作更多的div,那么较短的高度框开始下降。但我想让第一个盒子停滞在它的位置。

P.s.我已经绘制了啪嗒啪嗒的样子,但如果在发布此问题后发生扭曲,请运行代码。

<html> 
 
<head><title>abc</title> 
 
<style> 
 
\t #biggerbox{ 
 
\t \t width: 1200px; 
 
\t \t margin: 0 auto; 
 
\t \t padding-top: 100px; 
 
\t \t text-align: center; 
 
\t \t border: 1px solid; 
 
\t } 
 
\t #first{ 
 
\t \t width: 500px; 
 
\t \t height: 600px; 
 
\t \t display: inline-block; 
 
\t \t border: 1px solid; 
 
\t } 
 
\t #second{ 
 
\t \t width: 500px; 
 
\t \t height: 800px; 
 
\t \t display: inline-block; 
 
\t \t border: 1px solid; 
 
\t } 
 
</style> 
 
</head> 
 
<body> 
 
\t <div id="biggerbox"> 
 
\t \t <div id="first"> 
 
\t \t \t This is first box 
 
\t \t </div> 
 
\t \t <div id="second"> 
 
\t \t \t This is second box 
 
      <br>This is second box 
 
      <br>This is second box 
 
      <br>This is second box 
 
      <br>This is second box 
 
      <br>This is second box 
 
      <br>This is second box 
 
      <br>This is second box 
 
      <br>This is second box 
 
      <br> 
 
\t \t </div> 
 
\t </div> 
 
</body> 
 
</html> 
 
\t

+0

我没有得到任何东西。你可以请更多解释,如果你想向我们展示一些设计,然后提供图像。 –

<html> 
<head><title>abc</title> 
<style> 
    #biggerbox{ 
     width: 1200px; 
     margin: 0 auto; 
     padding-top: 100px; 
     text-align: center; 
     border: 1px solid; 
    } 
    #first, #second{ 
     width: 500px; 
     height: 600px; 
     display: inline-block; 
     border: 1px solid; 
     vertical-align: top; 
    } 
</style> 
</head> 
<body> 
    <div id="biggerbox"> 
     <div id="first"> 
      This is first box 
     </div> 
     <div id="second"> 
      This is second box 
      <br>This is second box 
      <br>This is second box 
      <br>This is second box 
      <br>This is second box 
      <br>This is second box 
      <br>This is second box 
      <br>This is second box 
      <br>This is second box 
      <br> 
     </div> 
    </div> 
</body> 
</html> 

更新CSS

的CSS

#biggerbox{ 
     width: 1200px; 
     margin: 0 auto; 
     padding-top: 100px; 
     text-align: center; 
     border: 1px solid; 
    display: inline-block; 

    } 
    #first{ 
     width: 500px; 
     height: 600px; 
     float:left; 
     border: 1px solid; 

    } 
    #second{ 
     width: 500px; 
     height: 800px; 
     float:left; 
     border: 1px solid; 

    } 
    .center 
    { 

    text-align: center; 
    display:inline-block; 
    margin: auto; 

    } 

Demo Link

+0

但我希望他们能中心对齐以及当浏览器窗口大小 –

+0

我已经更新了我的答案...尝试 –

+0

日Thnx您的帮助,但再次与类中心整个DIV是左对齐...的在垂直align:top服务于此目的 –

使用float:left在每个DIV的CSS。