Question

所以我将这个页面分成几个具有一堆复选框选项的块。目标是4个瓷砖宽3个瓷砖高。问题是我设置了＃34;列＆＃34;是100％的身高，我认为这将是父母div的100％，但看起来它实际上是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

嵌套的DIV和高度

1 个答案: