Question

我希望你能告诉我如何让这两个div（或者如果需要的话，跨越）适合另一个div。我需要内部两个div的大小是较大容器的一定百分比。他们还需要彼此相邻。我已经尝试了很多不同的解决方案在Web和stackoverflow上，似乎仍然无法使其工作。有人可以帮忙吗？代码片段在下面，我也包括一个小提琴，所以你可以更好地看到。

body {
    background-color:#f2f2f2;
}
#content {
    border:solid;
    height:500px;
    width:500px;
}
.results {
    width:50%;
    height:70%;
    border: solid;
    /*overflow:scroll;overflow-x:hidden;*/
    margin-left:7%;
    margin-top:5%;
    margin-bottom:8%;
}
.map {
    width:25%;
    height:70%;
    border: dotted;
    margin-top:5%;
    margin-bottom:8%;
    float:right;
}


<body>
    <div id="content">
        <div class="results"></div>
        <div class="map"></div>
    </div>
</body>

Here is the Fiddle for the above code

感谢大家的帮助！我希望我的问题很清楚。

Answer 1

我相信display:inline-block正是您所寻找的。

将其放入.results并用float:right替换.map。

Here is the updated jsFiddle

Answer 2

如果你想让内部div适合在外部div中，只需浮动它们。因为你没有浮动第一个内部div，这就是为什么你的第二个div低于它的原因。 float:left你的.results div，它将完成这项工作。

以下是对小提琴的一点修改：Here

希望有所帮助。：）

Answer 3

float:left;和.results以及.map上的任何内容都应该clear:left;。请查看http://jsfiddle.net/PHPglue/3Jfvp/。

我如何在另一个<div>中包含这两个<div>？当我使它们<span>时它不起作用</span> </div> </div>

3 个答案: