html - 嵌套的 DIV 和高度

Question

所以我将这个页面分成几个 block ，每个 block 都有一堆复选框选项。目标是 4 格宽 3 格高。问题是我将“列”设置为 100% 高度，我认为这是父 div 的 100%，但它似乎实际上是父 div 的 100%，有什么想法吗？

<div id="left" style="width:50%;height:100%;display:inline;float:left">
    <div id="leftRow1" style="width:100%;height:30%;display:inline;text-align:center">
        <div id="column1" style="width:50%;height:100%;display:inline;text-align:left;float:left">
            <h3>Appliances</h3>
            <div>
                <input id="dishwasher" class="css-checkbox" type="checkbox">Dishwasher
            </div>
            <div>
                <input id="dryer" class="css-checkbox" type="checkbox">Dryer
            </div>
            <div>
                <input id="freezer" class="css-checkbox" type="checkbox">Freezer
            </div>
            <div>
                <input id="garbage" class="css-checkbox" type="checkbox">Garbage
            </div>

        </div>
        <div id="column2" style="width:50%;height:100%;display:inline;text-align:left;float:right">
            <h3 style="color:white">.</h3>
            <div>
                <input id="microwave" class="css-checkbox" type="checkbox">Microwave
            </div>
            <div>
                <input id="range" class="css-checkbox" type="checkbox">Range/Oven
            </div>
            <div>
                <input id="refridgerator" class="css-checkbox" type="checkbox">Refridgerator
            </div>
            <div>
                <input id="washer" class="css-checkbox" type="checkbox">Washer
            </div>
        </div>
    </div>
    <div id="leftRow2" style="width:100%;height:30%;display:inline;text-align:center">
        <div id="column3" style="width:50%;height:100%;display:inline;text-align:left;float:left">
            <h3>Basement</h3>
            <div>
                <input id="finished" class="css-checkbox" type="checkbox">Finished
            </div>
            <div>
                <input id="partialfinish" class="css-checkbox" type="checkbox">Partially Finished
            </div>

        </div>
        <div id="column4" style="width:50%;height:100%;display:inline;text-align:left;float:right">
            <h3 style="color:white">.</h3>
            <div>
                <input id="unfininshed" class="css-checkbox" type="checkbox">Unfinished
            </div>
            <div>
                <input id="none" class="css-checkbox" type="checkbox">No Basement
            </div>
        </div>
    </div>
</div>

Answer 1

您的问题出在 display: inline 上。起初我没有注意到所有的内联样式。您不能在设置为内联显示的元素上设置高度。如果您将它们更改为 inline-block 那么它应该可以正常工作。

Updated demo

此外，我冒昧地删除了您的内联样式并将它们移动到 3 个类:包装器 - 最外层的 div，leftrow - 你的两个主要 div(电器和地下室)和列 - 都在 div 内。

Fixed Demo