Question

我在父div中有两个div。它们并排呈现

<image><info>

但是在较小的屏幕上我希望它们在另一个下面渲染一个并交换位置，比如

<info>
<image>

所以，他们在html中的实际顺序是

<info>
<image>

并且他们都有float:right所以他们看起来是交换的并排。在较小的屏幕上，它们都有float:none，并且它们应该在另一个之下出现。我使用了来自here的Shlomi的答案，它运作良好。

问题。

横向时，我想对齐左侧的div s，但由于float:right，它们对齐。

所以我想我给了容器position:relative和孩子position:absolute，所以我可以left:0;和right:0。这使容器的高度为零，并出现垂直滚动条。如果我将position:absolute恢复正常，但没有左对齐。

所以要么我可以使用position:absolute并修复容器的高度，要么我的解决方案很愚蠢，也许你会提出别的建议。

我的代码现在

#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;
}

Answer 1

您可以使用

float: left;

代替：）

这是Shlomi更新的小提琴：

https://jsfiddle.net/sk99xqdd/4/

我不确定它是否回答了你的问题...

绝对位置给父母没有高度

1 个答案: