我有一个两列布局,一个固定列和一个可变大小的列,最小宽度和最大宽度。列应相互齐平,因此没有空间。
的图片这是我尝试过的事情
JsFiddle:http://jsfiddle.net/49krdtf6/4/
.superOuter
{
background-color:#C0C0F0;
padding:20px;
text-align:center;
}
.outer
{
display:inline-block;
padding:20px;
background-color:#F0C0C0;
}
.test
{
overflow:hidden;
min-width:100px;
max-width:400px;
background-color:#F0F0F0;
padding:20px;
}
.test2
{
float:right;
width:200px;
padding:20px;
background-color:#F0F0C0;
}

<div class="superOuter">
When there's not enough content:<br>
<div class="outer">
<div class="test2">
Fixed content
</div>
<div class="test">
Rest with BFC
</div>
</div>
</div>
<br><br>
<div class="superOuter">
I want it to look like this (that is unless the page shrinks)<br>
<div class="outer">
<div class="test2">
Fixed Content
</div>
<div class="test">
Larger text here and it makes the whole thing go to the big size which is what I want without all the text
</div>
</div>
</div>
&#13;
我遇到的问题是我的可变宽度列不会增长到它的最大宽度,并且卡在由其内容确定的宽度上。
答案 0 :(得分:2)
您可以使用display
table
和table-cell
来实现此目的。另一个不同之处是丢弃max-width
而只改为width
。
* {
box-sizing:border-box;
}
.superOuter {
width:100%;
padding:20px;
text-align:center;
background-color:#C0C0F0;
}
.outer {
display:table;
width:100%;
padding:20px;
background-color:#F0C0C0;
}
.fixed {
display:table-cell;
width:400px;
padding:20px;
background-color:#F0F0F0;
}
.fluid {
display:table-cell;
padding:20px;
background-color:#F0F0C0;
}
<div class="superOuter">
When there's not enough content:
<br />
<div class="outer">
<div class="fixed">Fixed content</div>
<div class="fluid">Rest with BFC</div>
</div>
</div>
<强>更新强>
在评论中讨论后,我相信您确实对两个列width
都有一个限制,一个是400px
,另一个是800px
。
这样的事情:
* {
box-sizing:border-box;
}
.superOuter {
width:100%;
text-align:center;
padding:20px;
background-color:#C0C0F0;
}
.outer {
display:table;
width:100%;
padding:20px;
background-color:#F0C0C0;
}
.fixed {
display:table-cell;
width:400px;
padding:20px;
background-color:#F0F0F0;
}
.fluid {
display:table-cell;
width:800px;
padding:20px;
background-color:#F0F0C0;
}
<div class="superOuter">
When there's not enough content:
<br />
<div class="outer">
<div class="fixed">Fixed content</div>
<div class="fluid">Rest with BFC</div>
</div>
</div>
答案 1 :(得分:1)
这是你在找什么?
https://jsfiddle.net/retr0ron/
我在这里做的是重新安排HTML文档中的内容(注意我删除它的div之间不能有空格,否则你会发现它们之间有一个小的差距(因为内联方式 - 元素表现。)
HTML:
.outer
{
max-width:600px;
min-width: 380px;
padding:20px;
background-color:#F0C0C0;
margin:0 auto;
}
.test
{
overflow:hidden;
min-width:100px;
background-color:#F0F0F0;
padding:20px;
}
.test2
{
float:right;
width:200px;
padding:20px;
background-color:#F0F0C0;
}
CSS:
exception in thread "main" java.util.NoSuchElementException
at java.util.Scanner.throwFor(Scanner.java:838)
at java.util.Scanner.next(Scanner.java:1347)
at task.main.main(main.java:85)