Question

我试图在两个方框中放置图表，我希望它们在整个页面宽度上具有相同的宽度，并在我调整页面大小时自动调整：

<style>
#middle_row_contents li {
    display: inline-block;
    list-style-type: none;
    padding-right: 2em;
    *display: inline;
}
</style>
<div class="middle_row_box">
<ul id="middle_row_contents">
    <li>
        <div class="hours_rooms_used">
            <div><h3>Meeting hours per room</h3><select id="years_rooms_used"></select></div>
            <div class="tab_rooms_used"><canvas id="chart_rooms_used"></canvas></div>
        </div>
    </li>
    <li>
        <div class="hours_per_customer">
            <div><h3>Meeting hours per customer</h3><select id="years_rooms_customer"></select></div>
            <div class="tab_rooms_customer"><canvas id="chart_per_customer"></canvas></div>
        </div>
    </li>
</ul>
</div>

我试图把宽度：50％;两个

和分配宽度：100％在middle_row_box＆div;但它没有工作......我怎么能这样做？如果我把两个元素放在一个内部，那么它们不应该并排显示，因为在我的情况下看起来像是在新行中？

干杯，路易

Answer 1

您也需要将width设置为LI。他们应该怎么知道你想要调整它们的大小？

#middle_row_contents {margin: 0; padding: 0;}

#middle_row_contents li {
    display: inline-block;
    list-style-type: none;
    padding-right: 2%; /* ems and % aren't compatible, use the same units */
    *display: inline;
    width: 47%; /* lower than 48% because of a white-space gap between inline-block elements. Use float to avoid this gap. */
    background: red;
}

http://jsfiddle.net/x98g7c3k/

Answer 2

试试这个javascript片段

document.getElementById("hoursd_per_customers").style.width = (document.getElementById("hours_rooms_used").clientWidth - 10) + "px";

希望它能奏效。

For more details, Click here...

CSS怀疑是否同样调整两个内联框的大小

2 个答案: