只使用浮点数调整大小的CSS列。
只使用浮点数调整大小的CSS列。
提问于 2015-02-17 22:59:30
我正试着用浮点数来实现这一点：
|A******* B******************|
|*300px * * auto *|
|* * * *|
|******** *******************|
|A******* |
|*300px * |
|* * |
|******** |
|B************|
|* auto *|
|* *|
|*************|B块应该占用剩余的空间，当块A的可用空间小于500px时，它应该位于A块的下面。我尝试了许多组合，负面的margin解决方案，但都没有成功。
问题是，当没有空间时，css浮点数能够下降(堆栈)，但只有当width指定时才能这样做。当width未指定时，块占用剩余空间(这也是我所需要的)，但不能堆栈。我需要，B块的两个特性:占用剩余空间，在较小的屏幕上使用A。
如果不使用旧浏览器(IE8+和JS)中不支持的媒体查询和其他特性，您对此有何建议？
起点：
<div id="blockA">
blockA
</div>
<div id="blockB">
<p>blockB</p>
<p id="stopper">stopper</p>
</div>
#blockA {
border: 1px solid powderblue;
width: 300px;
float: left;
}
#blockB {
border: 1px solid khaki;
margin-left: 300px;
}
#blockB > p#stopper {
width: 500px;
border: 1px solid blue;
}请参见下面的解决方案。
回答 2
Stack Overflow用户
回答已采纳
发布于 2015-02-18 16:43:47
解决方案：带有float: left的容器和带有overflow: hidden的blockB
.container {
clear: left;
}
.blockA {
border: 1px solid red;
width: 300px;
float: left;
}
.blockB {
border: 1px solid blue;
min-width: 500px;
overflow: hidden;
}
<div class="container">
<div class="blockA">blockA</div>
<div class="blockB">blockB</div>
</div>在IE8和FF中测试，工作与我的问题中描述的完全一样。
Stack Overflow用户
发布于 2015-02-18 00:39:29
这将有助于：
#blockA {
border: 1px solid powderblue;
width: 100px;
float: left; /*YOU WERE NOT FLOATING THE DIV B*/
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/28572820
复制相关文章
相似问题
腾讯云开发者
