1

好的...所以我知道关于如何填充两个 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，这样它就会出现在正确的位置并且我仍然可以看到它。当我尝试 width:100% 时，它变得与包含部分一样宽并下降到下一行，然后将按钮推到该行。

我希望我不必求助于表格单元格......我认为如果我将中间单元格的宽度设置为 100%（尽管我没有尝试过），这可能会起作用。

4

2 回答 2

2

在 HTML 中，“green-button”标签应该在 line 标签之前（两个浮动必须在前），并且不要指定 awidth而是添加overflow: hidden。演示：http: //jsfiddle.net/M3Lt4/

于 2013-05-12T03:30:08.287 回答
0

这个怎么样 ..

<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-12T03:05:03.880 回答