让div填充左右元素之间没有固定宽度的剩余空间

好的......所以我知道有很多类似的问题关于如何填充两个div之间的剩余空间。然而，它们都不会为我工作，因为我不需要指望左侧和右侧的元素始终具有相同的宽度。我希望这是有道理的。让div填充左右元素之间没有固定宽度的剩余空间

这里是我的html：

<section id="recent-news-posts" class="light-gray-section"> 
    <h1> 
     <div class="h1-first"> 
      Recent 
     </div> 
     <div class="h1-second"> 
      NewsPosts 
     </div> 
    </h1> 
    <div class="line">&nbsp;</div> 
    <div class="green-button">Read All News</div> 
    <div class="content"> 
     Content 
    </div> 
</section>

这里是我目前拥有的CSS：

.light-gray-section { 
    background-color:#e4e0db; 
    display:block; 
    margin:0px; 
} 

    .light-gray-section h1 { 
     text-shadow: 2px 2px 2px rgba(0,0,0,0.3); 
     font-weight: 500; 
     padding-left: 30px; 
     padding-top: 30px; 
     padding-bottom: 15px; 
     margin:0px; 
     float:left; 
    } 

     .light-gray-section h1 .h1-first { 
      color:#142114; 
      display:inline; 
     } 

     .light-gray-section h1 .h1-second { 
      color:red; 
      display:inline; 
     } 

    .light-gray-section .line { 
     display:inline-block; 
     height: 45px; 
     width:100px; 
     margin-left: 10px; 
     margin-right: 10px; 
     border-bottom: 3px solid #9ec096; 
    } 

    .light-gray-section .green-button { 
     float:right; 
     /* IE10 Consumer Preview */ 
     background-image: -ms-linear-gradient(top, #4C9444 0%, #2D5E27 100%); 
     /* Mozilla Firefox */ 
     background-image: -moz-linear-gradient(top, #4C9444 0%, #2D5E27 100%); 
     /* Opera */ 
     background-image: -o-linear-gradient(top, #4C9444 0%, #2D5E27 100%); 
     /* Webkit (Safari/Chrome 10) */ 
     background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #4C9444), color-stop(1, #2D5E27)); 
     /* Webkit (Chrome 11+) */ 
     background-image: -webkit-linear-gradient(top, #4C9444 0%, #2D5E27 100%); 
     /* W3C Markup, IE10 Release Preview */ 
     background-image: linear-gradient(to bottom, #4C9444 0%, #2D5E27 100%); 
     border-radius: 5px; 
     padding:5px 10px 5px 10px; 
     color:white; 
     margin-right:30px; 
     margin-top:30px; 
     float:right; 
    } 

    .light-gray-section .content { 
     padding-left: 30px; 
     padding-right: 30px; 
     padding-bottom: 30px; 
     clear:both; 
    }

我想行以填补空间的100％（减去边距）之间h1和右边的按钮，但杀手是我需要允许h1和按钮内容改变（在我的asp.net应用程序中），这可能会改变它们的宽度，所以我无法将任何宽度硬编码到它们中。我发现的类似布局的所有解决方案都涉及将宽度硬编码到左侧和右侧元素中。

我希望这段代码能够在上下文之外工作，哈哈。现在，当然我的中间线的宽度硬编码为100px，这样它就会出现在正确的位置，我仍然可以看到它。当我尝试宽度：100％时，它变成与包含部分一样宽，然后落到下一行，然后将按钮按下到该行。

我希望我没有诉诸表格单元格......我想如果我设置的中间细胞具有100％的宽度（虽然我还没有尝试过），这可能工作。

来源

2013-05-12 mwiederrecht

在HTML，“绿色按钮”标签应该来行标记之前（包括花车必须先来），并且不指定代替width，但加入overflow: hidden。演示：http://jsfiddle.net/M3Lt4/

来源

2013-05-12 03:30:08

嗯......现在我感到困惑......这在您的小提琴中完美工作，但不适用于我的应用程序。似乎可能有一些其他的CSS把它搞乱了。我将不得不弄清楚是什么。但很好的答案！我会将它标记为正确的答案，然后继续弄清楚我的css中其他地方的东西是怎么搞的。谢谢！ – mwiederrecht 2013-05-12 03:36:03

顺便说一句，我从来不知道jsfiddle.net之前。爱它。谢谢你给我看！ – mwiederrecht 2013-05-12 03:36:43

哦！这只是我没有删除我在那里的实际应用中的行div的CSS废话的其余部分。最值得注意的是显示：inline-block ;.凉！ – mwiederrecht 2013-05-12 03:43:01

这个怎么样..

<section id="recent-news-posts" class="light-gray-section"> 
<h1> 
    <div class="h1-first"> 
     Recent 
    </div> 
    <div class="h1-second"> 
     NewsPosts 
    </div> 

</h1> 
<!--div class="line">&nbsp;</div--> 
<br /><hr align="center" width = "88%" size="1" /> 
<div class="green-button">Read All News</div> 
<div class="content"> 
    Content 
</div>

来源

2013-05-12 03:05:03 matzone

不幸的是，当h1和按钮组合的宽度大于宽度的12％时，这不希望工作。线条和按钮都低于之前的元素。我不需要知道在那里投入多少比例。（另外，从使用带边框的div更改为使用hr不会购买任何东西。） – mwiederrecht 2013-05-12 03:08:19

让div填充左右元素之间没有固定宽度的剩余空间

回答

相关问题