代码之家 › 专栏 › 技术社区 › Kyle

我怎样才能使圆角适合其他内容?

height html css

Kyle · 技术社区 · 14 年前

我一直在写动态页面 http://www.euroworker.no/order 我希望我可爱的圆角盒(边界半径,而不是图像)适合生成的产品和处方盒。这是动态的,所以我将该DIV的HTML和父元素设置为 height:100%; 但它只是延伸到页面的底部。

如何使圆角框适合生成的内容?

PRIS 安特尔

        <tr class="even first"> 
    <td class="cartControl"> 
                    <a href="/order/delete/984?return=shop%2FBluetooth-headset.42">Slett</a> 
    </td> 

    <td class="cartImage"> 
                    <a href="/Plantronics-CS361N.11"> 
            <img src="upload/productimage/11-22-1.jpg?1249726571" alt="Plantronics CS361N" /> 
        </a> 
                </td> 

    <td class="cartName"> 
        <div> 
                                <a href="/Plantronics-CS361N.11">Plantronics CS361N</a> 
                            <small>(&rlm;TrÃ¥dlÃ¸se - duo)</small> 
        </div> 


                </td> 

    <td class="cartPrice discount"> 
                        11950.-
            <div class="subTotalCalc"> 
                5 x <span class="basePrice">2988.-</span><span class="actualPrice">2390.-</span> 
            </div> 
                </td> 

    <td class="cartQuant"> 
        <input name="item_984" class="text" type="text" value="5"/> 
    </td> 
</tr> 
<tr class="odd"> 
    <td class="cartControl"> 
                    <a href="/order/delete/997?return=shop%2FBluetooth-headset.42">Slett</a> 
    </td> 

    <td class="cartImage"> 
                    <a href="/Target-7050CC-Duo-UNC.7"> 
            <img src="upload/productimage/7-250-1.jpg?1251022192" alt="Target 7050CC Duo UNC" /> 
        </a> 
                </td> 

    <td class="cartName"> 
        <div> 
                                <a href="/Target-7050CC-Duo-UNC.7">Target 7050CC Duo UNC</a> 
                            <small>(&rlm;Med ledning - duo)</small> 
        </div> 

                        <div class="productOptions"> 

                                <div class="nonEditableOption"> 
                Skal tilkobles:
                                        Cisco
                                                    </div> 

            <div class="productOptionsMenu"> 
        <a href="/order/options/997" ajax="/order/optionForm/997">Endre valg</a> 
    </div> 
        </div> 

                </td> 

    <td class="cartPrice discount"> 
                        <span class="basePrice">1124.-</span><span class="actualPrice">899.-</span> 
                </td> 

    <td class="cartQuant"> 
        <input name="item_997" class="text" type="text" value="1"/> 
    </td> 
</tr> 
<tr class="even last"> 
    <td class="cartControl"> 
                    <a href="/order/delete/998?return=shop%2FBluetooth-headset.42">Slett</a> 
    </td> 

    <td class="cartImage"> 
                    <a href="/Sennheiser-MM-400.626"> 
            <img src="upload/productimage/626-984-1.jpg?1264593017" alt="Sennheiser MM 400" /> 
        </a> 
                </td> 

    <td class="cartName"> 
        <div> 
                                <a href="/Sennheiser-MM-400.626">Sennheiser MM 400</a> 
                            <small>(&rlm;Bluetooth headset)</small> 
        </div> 


                </td> 

    <td class="cartPrice discount"> 
                        <span class="basePrice">1938.-</span><span class="actualPrice">1550.-</span> 
                </td> 

    <td class="cartQuant"> 
        <input name="item_998" class="text" type="text" value="1"/> 
    </td> 
</tr> 

        <tr> 
    <td colspan="3" class="subTotalCaption"> 
                        TilnÃ¦rmet fraktpris:
                </td> 
    <td class="amount shippingAmount">124.-</td> 
    <div id="roundbigbox"> 
<td id="cartUpdate"><!--<input type="submit" class="submit" value="Oppdater" />--> 
<button type="submit" class="submit" id="oppdatersubmit" name="saveFields" title="Oppdater" value="">&nbsp;</button> </td> 

</tr> 
        <tr> 
    <td colspan="3" class="subTotalCaption">mva:</td> 
    <td class="amount taxAmount">3600.-</td> 

</tr> 
    <tr> 
<td colspan="3" class="subTotalCaption">Totalt:</td> 
<td class="subTotal">18123.-</td>

    <div id="eavContainer_556782" class="eavContainer"> 

                                                                                                                    <p class="required "> 
                            <label for="product___specField_6"><span>Ordrekommentar:</span></label> 
                            <fieldset class="error"> 

<div class="textarea" style="margin-left: 0;"> 
    <textarea id="product__708_specField_6" name="specField_6" class="tinyMCE"></textarea> 
    <div class="errorText hidden"></div> 
</div> 

                                                                    <div class="errorText hidden"></div> 
                            </fieldset> 
                        </p> 
                                                                                                                </div>

CSS

圆形大盒子{

padding:10px;
width:760px;
height:1%;
border-width:1px;
border-radius:10px;
border-color:#dddddd;
-moz-border-radius:10px;
-webkit-border-radius:10px;
z-index:-1;
position:relative;
overflow:hidden;

}

1 回复 | 直到 12 年前

Nick Allen 14 年前

<div id="products">
    <div class="product">...</div>
    <div class="product">...</div>
</div>

#products
{
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    position: relative;
    height: 1%;
    overflow: hidden;
    padding: 10px;
}

您将无法在IE中使用边界半径,但框将动态扩展以容纳IE6+、FF、S、C&O中的x个产品量。