Flex内容以推送内容

时间：2015-06-11 13:50:09

标签： html css

我有一个div，这是一个容器，display: flex。在这个div中，我有两个div，第一个是图片，第二个是产品的内容。

产品的内容每次都不同，所以我不知道它的高度。

无论如何，我总是希望保持在底部的篮子按钮和库存标记。

这是一张图片，现在看起来如何。

enter image description here

如你所见，asdasadasdadas溢出。带绿色边框的底部div应始终处于向下位置。我怎样才能获得asdasdasdad（该产品的内容是推动整个div。

以下是一些代码：

HTML 

<div class="productRow">


    <div class="outter">
        <div class="productRow">
            <div class="markerNew">Új</div>
            <div class="image">
                <a href="/atalakito_kabel_5_5mmx2_5mm__>_4_0mmx1_7mm-u56983.html"><img src="http://cdn.pcszerviz.com/Images/image.php?image=http://cdn.pcszerviz.com/alkatreszkepek/23020_300x300.png" alt="Átalakító kábel 5.5mmx2.5mm -&gt; 4.0mmx1.7mm" title="Átalakító kábel 5.5mmx2.5mm -&gt; 4.0mmx1.7mm" /></a>     </div>
            <div class="productContainer">
                <div class="productInfo">
                    <div class="titleContainer">
                        <span class="more">
                            <a  data-transition="none" href="/atalakito_kabel_5_5mmx2_5mm__>_4_0mmx1_7mm-u56983.html">Átalakító kábel 5.5mmx2.5mm -&gt; 4.0mmx1.7mm</a>
                        </span>
                        <h2><a  data-transition="none" href="/atalakito_kabel_5_5mmx2_5mm__>_4_0mmx1_7mm-u56983.html">Átalakító kábel 5.5mmx2.5mm -&gt; 4.0mmx1.7mm</a></h2>
                        <div class="partnumber">5.5x2.5mm-4.0x1.7mm_kábel</div>
                        <div style="display: block;">
                            asdsadsadasd<br>
                            asdsadsadasd<br>
                            asdsadsadasd<br>
                            asdsadsadasd<br>
                            asdsadsadasd<br>
                            asdsadsadasd<br>
                            asdsadsadasd<br>
                        </div>
                    </div>
                </div>
                <div class="bottomInfo">
                    <div class="inStockContainer" style="background: #E0E0E0 url('http://cdn.pcszerviz.com/Images/rendelesre_32.jpg') no-repeat;">
                        <div class="inStockText">Rendelésre</div>
                    </div>

                    <div class="priceAndBasketContainer">
                        <div class="priceContainer"><span>Ár: </span>349 Ft</div>
                        <div class="fullBasket">
                            <input type="text" name="qty" value="1" />
                            <div class="basketContainer addToBasket intoBasket" data-id="56983" data-status="uj">
                                Megrendelem |
                            </div>
                        </div>
                    </div>
                    <div class="clear"></div>


                </div>
            </div>
        </div>
    </div>
</div>

CSS 

.ui-content div#productsList {background-color:  #fff; width: 100%;}
.ui-content div#productsList div.outter {margin-bottom: 20px;}
.ui-content div#productsList div.outter div.productRow {width: 100%; border: 1px solid #ddd; box-sizing: border-box; display: flex; position: relative}
.ui-content div#productsList div.outter div.productRow:hover {box-shadow: #cecece 3px 3px 4px;}

.ui-content div#productsList div.outter div.productRow div.markerNew  {position: absolute; top: 7px; left: -3px; font-size: 15px; background: transparent url('../images/marker_new.png') no-repeat; width: 88px; height: 31px; text-align: center; color: #fff; font-weight: bold; text-transform: uppercase; box-sizing: border-box; line-height: 26px}
.ui-content div#productsList div.outter div.productRow div.markerUsed {position: absolute; top: 7px; left: -3px; font-size: 15px; background: transparent url('../images/marker_used.png') no-repeat; width: 88px; height: 31px; text-align: center; color: #fff; font-weight: bold; text-transform: uppercase; box-sizing: border-box; line-height: 26px}

.ui-content div#productsList div.outter div.productRow div.image {width: 20%; box-sizing: border-box; height: 200px; order: 1; box-sizing: border-box; margin: 3px; margin-top: 35px}
.ui-content div#productsList div.outter div.productRow div.image img {width: 100%; max-width: 200px; padding: 2px; border: 1px solid #EDEDED; box-sizing: border-box; }

.ui-content div#productsList div.outter div.productRow div.productContainer {width: 80%; box-sizing: border-box; height: 200px;  border: 1px solid #00f; order: 2; position: relative; }

.ui-content div#productsList div.outter div.productRow div.productContainer div.bottomInfo {position: absolute; bottom: 0px; height:115px; border: 1px solid #00f000; width: 100%; box-sizing: border-box}

.ui-content div#productsList div.outter div.productRow div.productContainer div.bottomInfo div.inStockContainer {float: left; width: 118px; height: 32px; display: block; margin-left: 0; position: absolute; bottom: 0; left: 10px;}
.ui-content div#productsList div.outter div.productRow div.productContainer div.bottomInfo div.inStockContainer div.inStockText {line-height: 32px; font-weight:bold; color: #000; height: 100%; font-size: 11px; margin-left: 3px; padding-left: 5px; box-sizing: border-box; text-transform: uppercase}

.ui-content div#productsList div.productRow  div.productContainer div.bottomInfo div.priceAndBasketContainer {float: right; position: absolute; bottom: 0; right: 10px}
.ui-content div#productsList div.productRow  div.productContainer div.bottomInfo div.priceAndBasketContainer div.priceContainer {color: #e51e30; font-weight: bold; font-size: 20px; margin-bottom: 10px; text-align: right}
.ui-content div#productsList div.productRow  div.productContainer div.bottomInfo div.priceAndBasketContainer div.priceContainer span {font-size: 11px;}

.ui-content div#productsList div.productRow  div.productContainer div.bottomInfo div.priceAndBasketContainer div.fullBasket .ui-input-text {text-align: center; width: 50px; margin: 5px auto;}
.ui-content div#productsList div.productRow  div.productContainer div.bottomInfo div.priceAndBasketContainer div.fullBasket div.basketContainer {padding: 10px; background: #98BF20;}
.ui-content div#productsList div.productRow  div.productContainer div.bottomInfo div.priceAndBasketContainer div.fullBasket div.basketContainer {cursor: pointer; background: #3e3e3e url('../images/basket.png') no-repeat right 10px center; padding: 10px 45px 10px 5px; color: #fff; text-transform: uppercase; display: inline-block; font-weight: bold; text-shadow: none; font-size: 0.8em; text-decoration: none;}

.ui-content div#productsList div.productRow  div.productContainer div.productInfo div.titleContainer {margin: 10px;}
.ui-content div#productsList div.productRow  div.productContainer div.productInfo div.titleContainer h2 {overflow: hidden; padding-right: 5px; color: #e51e30; font-size: 1.2em; word-wrap: break-word; margin: 0;}
.ui-content div#productsList div.productRow  div.productContainer div.productInfo div.titleContainer h2 a {color: #e51e30; text-decoration: none;}
.ui-content div#productsList div.productRow  div.productContainer div.productInfo div.titleContainer span.more {float: right; width: 39px; height: 39px; background: transparent url('../images/product_more.png') no-repeat}
.ui-content div#productsList div.productRow  div.productContainer div.productInfo div.titleContainer > span:first-child {float:right; display:inline-block;}
.ui-content div#productsList div.productRow  div.productContainer div.productInfo div.titleContainer span.more a {display: inline-block; width: 100%; height: 100%; text-indent: -9999px}
.ui-content div#productsList div.productRow  div.productContainer div.productInfo div.partnumber {margin-bottom: 10px; margin-top: 3px; color: #555; font-weight: bold;}

0 个答案:

没有答案
相关问题
最新问题