html - 在流体设计中，我无法将 3 个 div 的宽度扩展到父宽度的 100%

Question

我有 3 个 div，它们应该排成一行。它们的宽度是每个父元素的 33%。这 3 个 div 似乎没有拉伸(stretch)到 33%，只是和其中的文本一样宽。

如何使它们正好是父元素的 100% (3x33%)？

只有在使用流体布局时才会遇到这个问题。

这里是 JSFiddle 的链接.

CSS

.page_block {
    max-width: 1000px;
    min-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.foot_bar_links {
    float: left;
    width: 32%;
    display: inline-block;
    border: 1px solid black;
}

#foot_left {
    min-height: 230px;
    width: 68%;
    float: left;
}

#foot_right {
    min-height: 230px;
    width: 32%;
    float: left;
}

#foot_links1 {
    min-height: 80px;
    float: left;
}

#foot_links2 {
    min-height: 70px;
    float: left;
}

#foot_links3 {
    min-height: 60px;
    float: left;
}

HTML

<div class="foot_bar_links">
    <div style="width: 50%">
        PROGRAMS<BR />EVENTS<BR />CALENDAR
    </div>
    <div style="width: 50%">
        <img src="images/calendar_s.jpg" style="vertical-align: middle">
    </div>
</div>
<div class="foot_bar_links">
    <div style="width: 50%">
        <b>STAY INFORMED</b> 
    </div>
    <div style="width: 50%">
    <img src="images/newspaper_s.jpg" style="vertical-align: middle">
    </div>
</div>
<div class="foot_bar_links">
    <div style="width: 50%">
        <img src="images/phone_s.jpg" style="vertical-align: middle">
    </div>
    <div style="width: 50%">
        ######
    </div>
</div>

Answer 1

Waaaay 更简单的解决方案(JSBin):

HTML:

<article>
  <section>Bla bla bla.</section>
  <section>Bla bla bla.</section>
  <section>Bla bla bla.</section>
</article>

CSS:

article {
  display: flex;
}

轰...