Question

父#Connect有两行＃unit1＆amp; ＃单元2。每行有两列.col1＆amp; .col2。我有两个问题：

#Connect只会像＃unit1一样落下 - 所以我看不到蓝色背景。我希望#Connect和浏览器一样宽，但要高得多。
我想＃unit1＆amp; ＃unit2的背景与#Connect一样宽，与.col2一样高。目前，我看不到任何背景。

以下是代码：

<html>
    <head>
        <title></title>
        <link type="text/css" href="colReflow.css" rel="stylesheet">
        <style>
            #connect .col1{
                float: left; width: 240px; background-color: #ffc0cb;
            }
            #connect .col2{
                background-color: yellow; margin-left: 248px;
            }
            #connect .offCont{
                position: relative; top: 0; left: 0; float: left;
                width: 210px;height:256px;
                color: #000000;
                font-family: "TrumpGothicEastBold",Arial,helvetica,sans-serif;
                text-transform: uppercase;
                margin: 10px 10px 0 0;
                background: #9acd32;
            }
            #connect .section{
                /*I want the background to be as 100% width of Connect and the height of the contents of col2*/
                background: #ff69b4;clear: both; width: 100%;
            }
        </style>
    </head>
    <body>

        <div id="connect">

            <div id="unit1" class="section">
                <div class="col1">This column is used solely to hold this area.</div>

                <div class="col2">
                    <div class="offCont">drgdrg</div>
                    <div class="offCont">drgdrg</div>
                    <div class="offCont">drgdrg</div>
                    <div class="offCont">drgdrg</div>
                </div>
            </div>

            <div id="unit2" class="section">
                <div class="col1">This column is used solely to hold this area.</div>

                <div class="col2">
                    <div class="offCont">I want this section or unit 2 to be as tall as the contents of col2</div>
                    <div class="offCont">drgdrg</div>
                    <div class="offCont">drgdrg</div>
                    <div class="offCont">drgdrg</div>
                </div>
            </div>
        </div>

    </body>
</html>

Answer 1

把

overflow: hidden;

在#connect和.section

上

获取父div以匹配内容的高度和宽度

1 个答案: