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

时间:2015-05-13 20:40:23

标签: html css

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

我正在寻找http://imgur.com/RQXXaoz

的图片

这是我尝试过的事情

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;
&#13;
&#13;

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

2 个答案:

答案 0 :(得分:2)

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

答案 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)