Question

我希望将内部两个div定位为： _________ _________ | | | | | | | | | | | | | _________ | | | | | | _________ |

现在发生的事情是，当它们都是空的或者其中的数据很简单时只有文本然后它看起来像这样。但是当我使用
时，如果我在里面用更多的余量制作更多的div，那么较短的高度框开始下降。但我希望第一个盒子在它的位置上停滞不前。

P.S。我已经绘制了模式，但如果在我发布此问题后它变得扭曲，那么请运行代码。

<html>
<head><title>abc</title>
<style>
	#biggerbox{
		width: 1200px;
		margin: 0 auto;
		padding-top: 100px;
		text-align: center;
		border: 1px solid;
	}
	#first{
		width: 500px;
		height: 600px;
		display: inline-block;
		border: 1px solid;
	}
	#second{
		width: 500px;
		height: 800px;
		display: inline-block;
		border: 1px solid;
	}
</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>

Answer 1

更新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

Answer 2

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

Answer 3

在每个div的css中使用float:left。

如何在同一水平上携带内箱

3 个答案: