css - CSS，如何将div放入可响应的div中？

我正在尝试创建一个具有并排响应的2个内容的框。我希望div具有单独的类，因此当我添加javascript时，每个内容将是彼此唯一的。有人可以帮我吗？

的HTML：

<head>
    <meta charset="utf-8">
</head>

<body>

    <style type="text/css">
        .outer {
            border: 1px solid black;
            }
        .inner-top {
            float:center;
            text-align: center;
            }
        .inner-left {
            border: 1px solid black;
            text-align: center;
            }
        .inner-right {
            border:1px solid black;
            text-align: center;
            }
    </style>

    <div class="outer">
        <div class="inner-top">
            <div class="inner-left">
                <p>
                inner left
                </p>
            </div>
            <div class="inner-right">
                <p>
                inner right
                </p>
            </div>
        </div>
    </div>

</body>
</html>

编辑：我应该更详细地解释一下自己，我想将外部类保留为容器，将内部顶部类用作内部左类和内部右类的内部容器。

最佳答案

这是您想要的效果吗？

http://jsfiddle.net/psLu7/

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.outer {
  border: 1px solid black;
}

.inner-top {
  /* float:center; */
  text-align: center;
  overflow: auto;
 }

 .inner-left {
   border: 1px solid black;
   text-align: center;
   float: left;
   width: 50%;
 }

 .inner-right {
   border:1px solid black;
   text-align: center;
   float: left;
   width: 50%;
 }