Question

我希望左边有两个div框，右边有另一个div框。

随着代码的帮助关闭它，但两者都没有相同的对齐。它一个接一个地来。这是我的代码

<style>
            html { margin:0; padding:0; font-size:62.5%; }
            body { max-width:300px; font-size:14px; font-size:1.4em; }
            h1 { font-size:1.8em; }
            .demo { overflow:auto; border:1px solid silver; min-height:100px;min-width: 200px;float: left }
            .demo1 { overflow:auto; border:1px solid silver; min-height:100px;min-width: 200px; float: right}
        </style>
        <link rel="stylesheet" href="style.min.css" />
    </head>

    <body><div id="frmt" class="demo"></div>
        <div id="frmt1" class="demo1"></div>
        </body>

就这样

我希望它看起来像

Answer 1

这是因为你max-width: 300px; body。删除它可以解决问题。

demo和demo1的{{1}}分别为200px，总计为400px。但min-width的{{1}}只有300像素。

body

Answer 2

Flex变得越来越普遍，意味着您不必将盒子放得太远

.demo-container {
  display: flex;
  align-items: center;
}

.demo {
  overflow: auto;
  border: 1px solid silver;
  min-height: 100px;
  min-width: 200px;
}

.demo-button {
  height: 25px;
  margin: 20px;
}

<div class="demo-container">
  <div id="frmt" class="demo"></div>
  <button class="demo-button">>></button>
  <div id="frmt1" class="demo"></div>
</div>

我知道您的问题已经得到解答，但解决问题的方法总是不止一种:-)

Answer 3

试试这个

     <body><div id="frmt" class="demo" style="float:left;"></div>
    <div id="frmt1" class="demo1" style="float:right;"></div>
    </body>

在左右角获得2div盒子

3 个答案: