The problem i'm having is i need to float one element with a fixed width to the left, and have an element next to it fill the remaining width.
我遇到的问题是我需要向左移动一个固定宽度的元素,并在其旁边有一个元素填充剩余的宽度。
The only solution that i know of is to float the first element, and then the element next to it will automatically fill the remaining width. The problem i'm having is the following:
我所知道的唯一解决方案是浮动第一个元素,然后旁边的元素将自动填充剩余的宽度。我遇到的问题如下:
http://codepen.io/anon/pen/udBsx
If the green content is higher than the red, it will jump down below the red. Is there any way to prevent this from happening? I've played around with clear but i don't think there's anything i can do to keep it from happening.
如果绿色内容高于红色,它将跳到红色以下。有什么方法可以防止这种情况发生吗?我玩的很清楚但我不认为我能做些什么来防止它发生。
To make it even worse, the site is responsive. If it weren't, i could just give the green element a static width and float it as well, but that is not the case. I can't use percentage because the red element has a static width.
更糟糕的是,该网站响应迅速。如果不是,我可以给绿色元素一个静态宽度并浮动它,但事实并非如此。我不能使用百分比,因为红色元素具有静态宽度。
I believe flexbox has what i'm looking for but unfortunately it's not an option right now due to lack of support.
我相信flexbox有我正在寻找的东西但不幸的是,由于缺乏支持,它现在不是一个选择。
Ideas?
1 个解决方案
#1
3
EDIT:
The css code should look like this:
css代码应如下所示:
.floated {
width:200px; float:left;
}
.fill {
margin-left:200px;
}
#1
3
EDIT:
The css code should look like this:
css代码应如下所示:
.floated {
width:200px; float:left;
}
.fill {
margin-left:200px;
}