Question

我正在尝试创建一个包含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>

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

Answer 1

试试这个

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

这是我创建的jsfiddle - http://jsfiddle.net/PYAgx/

Answer 2

这是你想要的效果吗？

http://jsfiddle.net/psLu7/

enter image description here

* {
    -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%;
 }

CSS，如何将div放在响应的div中？

2 个答案: