Question

好的......所以我知道有很多类似的问题关于如何填补两个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;
    }

我希望线条填充h1和右边按钮之间的100％空间（减去边距），但杀手是我需要允许h1和按钮内容改变（在我的asp中） .net应用程序）可以很好地改变它们的宽度，所以我不能将任何宽度硬编码到它们中。我找到的类似布局的所有解决方案都涉及将宽度硬编码到左右元素中。

我希望这段代码脱离上下文，大声笑。现在，当然我将中间线的宽度硬编码为100px，以便它出现在正确的位置，我仍然可以看到它。当我尝试宽度：100％时，它变得与包含部分一样宽，然后下降到下一行并在此之后将按钮推到该行。

我希望我不必诉诸表格单元格...我认为如果我将中间单元格设置为100％的宽度（虽然我没有尝试过），这可能会有效。

Answer 1

在HTML中，“green-button”标记应位于行标记之前（两个浮点数必须首先出现），并且不指定width，而是添加overflow: hidden。演示：http://jsfiddle.net/M3Lt4/

Answer 2

这个怎么样..

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

div填充左右元素之间的剩余空间，这些元素不具有固定的宽度

2 个答案: