我有一个DIV。在它里面,我有两个浮动的DIV。一个漂浮在左边,一个漂浮在右边。
左浮动的宽度为calc(100%-284px)。向右浮动的宽度为284px。它们都位于DIV中,该DIV是宽度为70%的中心弹出窗口。
-----------------------
| Main Div 70% |
15%|---------- ----------|15%
|| float | | float ||
|| left | | right ||
|---------- ----------|
-----------------------
当我调整窗口大小时,会缩小70%,这很好。为防止左侧浮子受到挤压,它的最小宽度为284px。
我继续缩小屏幕,右浮子降到左浮子之下。现在看起来糟透了,因为我只有一列两行(一左一左,一右右),而一左一左旁边有284px的大间隙。
--------------------
| ----------- |
| | left | 284 |
| | float | gap |
| ----------- |
| ? ----------|
| gap | right ||
| | ||
| ----------|
--------------------
理想情况下,我希望我的左浮点将大小从calc(100%-284)更改为100%。现在在它下面的右浮子。
--------------------
|------------------|
| left |
|------------------|
| ----------- |
| | right | |
| ----------- |
--------------------
请有人告诉我代码如何执行此操作,我想它很简单,但我看不到。
#Left{
display: block;
float: left;
text-align: center;
color: #FFFFFF;
overflow-y: auto;
overflow-x: hidden;
float: left;
width: -webkit-calc(100% - 284px);
width: -moz-calc(100% - 284px);
width: calc(100% - 284px);
min-width: 284px;
height: auto;
margin-left: 6px;
margin-top: 0px;
margin-bottom: 6px;
}
#Right{
float: right;
width: 250px;
height: auto;
margin-right: 6px;
margin-top: 0px;
margin-bottom: 6px;
}
#Popup {
font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
border-radius: 3px 3px 3px 3px;
color: #333333;
display: none;
font-size: 14px;
margin-left: 15%;
margin-right: 15%;
position: fixed;
top: 15%;
bottom: 15%;
width: 70%;
z-index: 222;
text-align: center;
}
谢谢克里斯
我不确定您制作的是哪种布局,但是,您可以使用CSS媒体查询。右边的div达到250px时将下降;
@media all and (max-width: 732px) {
#left {
background: green;
float: none;
width: 100%;
}
#right {
background: pink;
float: none;
margin: auto;
width: 50%;
}
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句