Question

我有一个两列布局，一个固定列和一个可变大小的列，最小宽度和最大宽度。列应相互齐平，因此没有空间。

的图片

这是我尝试过的事情

JsFiddle：http://jsfiddle.net/49krdtf6/4/

＆＃13;

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

＆＃13;

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

我遇到的问题是我的可变宽度列不会增长到它的最大宽度，并且卡在由其内容确定的宽度上。

Answer 1

您可以使用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>

jsFiddle demo

<强>更新

在评论中讨论后，我相信您确实对两个列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>

jsFiddle demo

Answer 2

这是你在找什么？

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)

在内联块元素内使用max-width

2 个答案: