position absolute给父级没有高度 [英] position absolute gives parent no height

问题描述

我在父项 div 中有两个 div

<image><info>

但是在较小的屏幕上，我想让它们一个在另一个之下，并交换位置，如

but on smaller screens I want them to render one under the other and swap positions, like

<info>
<image>

因此，他们在html中的真实顺序是

So, their real order in html is

<info>
<image>

，它们都有 float：right 他们出现交换和并排。在较小的屏幕上，他们都有 float：none ，它们应该出现在另一个下面。我使用了来自此处的Shlomi的答案，它的工作正常。

and they both have float:right so they appear swapped and side by side. On smaller screens they both have float:none and thet appear one under the other as they should. I used Shlomi's answer from here and it works fine.

问题。

水平时，我要对齐 div s，但由于 float：right ，它们对齐。

When horizontal, I wan to align the divs on the left, but due to the float:right, they align right.

所以我想我给了容器 position：relative 和孩子 position：absolute ，那么我可以做 left：0; 和 right：0 。这使得容器具有零高度，并出现垂直滚动条。如果我删除位置：absolute 它回到正常，但没有左对齐。

So I thought I give the container position:relative and the children position:absolute , so then I can do left:0; and right:0. This make the container have zero height and a vertical scrollbar appears. If I remove the position:absolute its back to normal, but no left aligned.

所以，我可以使用 position：absolute 并修复容器的高度，或者我的解决方案是愚蠢的，其他。

So either I can use position:absolute and fix container's height or my solution is stupid and maybe you suggest something else.

我的代码现在

#container{
   width: 100%;
   height: auto;
   display: block;
   margin-top: 30px ;  
   padding-bottom: 38px;
   clear: both;
   overflow: auto;
   position: relative;
}

#image{
    display: block;
    height: 221px;
    width : auto;
    float: right; 
    margin-right: 20px;
    position: absolute;
    clear: both;
    overflow: auto;
}

#info{
    width:-moz-calc(100% - 331px);width: -webkit-calc(100% - 331px);width: calc(90% - 331px);    
    height: 500px;
    display: block;
    float: right;
    position: absolute;
    clear: both;
    overflow: auto;
}

推荐答案

>

You might use

float: left;

代替：）

Shlomi的小提琴更新了：

Here is the fiddle of Shlomi updated :

https：// jsfiddle。 net / sk99xqdd / 4 /

我不确定是否能回答您的问题...

I'm not sure if it answers your question ...

这篇关于position absolute给父级没有高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！