[英]How to get a border to size to its content with varying data and footer to adjust
我正在创建一个结帐系统,我有一个称为订单确认的部分。 这是显示添加到购物车的产品的简要摘要。 因此大小会因订单而异。 我在此部分周围有一个边框,而我遇到的问题是,如果有两种以上的产品,则这些产品将开始超出边界范围。 我试图使包含边框的div具有相对位置,但是似乎边框保持固定。 我将边框设置为一个高度,所以我不确定这是否导致边框无法调整,但是我需要将其设置为最小高度。
这是它的html源代码:
<div class="checkoutconfirmationcontainer">
<div name="product_id"> </div>
<div class="orderconfirmdisplay">
<span class="tealmedium">1 - Baseball</span><br><br><br>
<div class="floatleft"><div class="smallerimgcontainercheckout">
<img class='sizedimg' src='/productpics/coming_soon.png' alt='Coming Soon'><br><br><br><br> </div></div>
</div>
<div class="checkoutitemsummary">
<a href='./viewProduct.php?view_product=12'>Baseball </a>
<p><span class="redprice">$10<br /> </div>
<div class="orderconfirmdisplay">
<span class="tealmedium">1 - Lakers Hat</span><br><br><br>
<div class="floatleft"><div class="smallerimgcontainercheckout">
<img class='sizedimg' src='/productpics/coming_soon.png' alt='Coming Soon'><br><br><br><br> </div></div>
</div>
<div class="checkoutitemsummary">
<a href='./viewProduct.php?view_product=11'>Lakers Hat </a>
<p><span class="redprice">$25<br /> </div>
<div class="orderconfirmdisplay">
<span class="tealmedium">4 - Steamer Trunk</span><br><br><br>
<div class="floatleft"><div class="smallerimgcontainercheckout">
<img class='sizedimg' src='/productpics/coming_soon.png' alt='Coming Soon'><br><br><br><br> </div></div>
</div>
<div class="checkoutitemsummary">
<a href='./viewProduct.php?view_product=10'>Steamer Trunk </a>
<p><span class="redprice">$200<br /> </div>
<div class="orderconfirmdisplay">
<span class="tealmedium">4 - Best Tennis Ball</span><br><br><br>
<div class="floatleft"><div class="smallerimgcontainercheckout">
<img class='sizedimg' src='/productpics/coming_soon.png' alt='Coming Soon'><br><br><br><br> </div></div>
</div>
<div class="checkoutitemsummary">
<a href='./viewProduct.php?view_product=17'>Best Tennis Ball </a>
<p><span class="redprice">$15<br /></span></p>
</div>
<input type="hidden" name="token" value="967ee4057c86e74fa799c7f569d6a127">
<input class="widebutton placefinalorder" name="btnSubmit" id="btnSubmit" type="submit" value="Place Your Order">
<input type='hidden' id='AuthorrizeResponseText' name='AuthorrizeResponseText' value='' />
<br>
</div>
这是本节主要部分的CSS。
.confirmationinfocontainer {
width: 61%;
border: 1px solid #E6E6E6;
height: 450px;
float: left;
position: relative;
margin-bottom: 200px;
padding: 15px;
}
那我的页脚不适应吗?
.footerOut {
width: 100%;
background-color: #202020;
position: relative;
padding-top: 30px;
left: 0px;
right: 0;
margin-bottom: 0px;
margin-top: 20px;
bottom: 0px;
clear: both;
}
.footer {
height: 420px;
width: 960px;
}
我不确定自己在做什么错,以便我的页面进行调整。 如果更轻松,我的网站是buyfarbest.com。 如果您有4件商品加入购物车,然后转到结帐的“订单确认”部分,则可能更容易理解我的意思。 在html中保存了一个测试卡号,因此只需在到期日后输入一个日期即可,它可以让您提前。
好的,给具有边框的包装纸分配min-height
而不是高度,并添加一个属性overflow: hidden;
.confirmationinfocontainer{ //your warpper div
min-height: 450px;
overflow: hidden;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.