两列相同高度 - Bootstrap - CSS

目前，我正在创建一个两列相邻的产品包装盒，其中一个包含产品图片和一个产品说明。两列相同高度 - Bootstrap - CSS

主要问题是，我试图使产品描述与图像高度相同，但经过几次尝试后，我没有接近解决问题，因为它需要是响应。我尝试了很多解决方案，但仍然卡住了，最近的一个正在使用媒体查询并将高度应用于.product-det，但似乎这不是好方法。

蓝色边框必须达到包装的底部。

HTML

<div class="container"> 
    <div class="col-xs-6"> 
     <div class="col-xs-12 padding-15 margin-b-15 border-default padding-t-0 padding-b-0"> 
      <div class="row"> 
       <div class="col-xs-12"> 
        <div class="row"> 
         <div class="col-xs-4 col-sm-3 nopadding"> 
          <img class="img-responsive" src="http://placehold.it/250x250"> 
         </div> 
         <div class="col-xs-8 col-sm-9 border-l-default"> 
          <div class="row"> <a href="#" title="" class=""><h4 class="col-xs-10 margin-t-15 text-ellipsis">Article pokeball superpotion lighting boltubertext pokemon pikachu</h4></a> 

           <div 
           class="col-xs-2 padding-t-15"> <span class="pointer pull-right"> 
                <i class="glyphicon glyphicon-remove"></i> 
               </span> 

          </div> 
          <div class="product-det col-xs-12 line-h-35"> 
           <div class="row"> 
            <div class="col-xs-4">ITEMID</div> 
            <div class="col-xs-4"> 
             <div class="input-group"> 
              <input class="form-control" placeholder="qnt" type="text"> <span class="input-group-btn"> 
                 <button class="btn btn-secondary" type="button"> 
                 <span class="glyphicon glyphicon-refresh"></span> 

              </button> 
              </span> 
             </div> 
            </div> 
            <div class="col-xs-4"><span class="pull-right">3.203 €</span> 
            </div> 
           </div> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 
<div class="">Right content</div> 
</div>

CSS

.text-ellipsis { 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
} 
.padding-15 { 
    padding: 15px; 
} 
.padding-t-15 { 
    padding-top: 15px; 
} 
.margin-b-15 { 
    margin-bottom: 15px; 
} 
.border-default{ 
    border: 1px solid #e0e0e0; 
} 
.padding-t-0 { 
    padding-top: 0px; 
} 
.padding-b-0 { 
    padding-bottom: 0px; 
} 
.nopadding { 
    padding: 0; 
} 
.line-h-35 { 
    line-height: 35px; 
} 
.border-l-default { 
    border-left: 1px solid blue; 
}

请不要使用JavaScript的解决方案要求，必须是CSS :)

来源

2016-12-15 Troyer

是形象应该是正方形？我的意思是不是250像素×250像素，我的意思是高度应该跟随你的自举宽度？ – Obink

@Obink是的，它应该:) – Troyer

这里是解决方案没有flex和js：http：//www.bootply.com/kYphIQyinm – Banzay

尝试以下操作：

HTML：

<div class="row row-eq-height"> 
    <!--The div columns you want them to be same height should be here--> 
</div>

CSS：

/* 
    Row with equal height columns 
*/ 
.row-eq-height { 
    display: -webkit-box; 
    display: -webkit-flex; 
    display: -ms-flexbox; 
    display:   flex; 
}

来源

2016-12-15 08:47:03 Taniya

啊，你很快，比我快一分钟xD – Sandro

圣s，你是一个巫师吗？它的工作原理，我可以获得更多的信息，并且它可以在所有浏览器上运行吗？ :) – Troyer

谢谢男人:)。是啊显示：Flex在不同的浏览器中工作正常...检查此https://css-tricks.com/using-flexbox/ – Taniya

尝试更改文本省略号这样，实在是有点粗鲁，因为我没有使用自举类，但它工作得很好对我说：

.text-ellipsis { 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    margin-bottom: 71px; 
}

来源

2016-12-15 08:48:03

对不起，它不会工作，因为小的设备有更小的高度:) – Troyer

尝试设置最小高度在不同mediaquery

.border-l-default { 
    border-left: 1px solid blue; 
    min-height: 135px;

来源

2016-12-15 08:52:20

对不起，它必须是响应的解决方案，固定的高度，它会破坏响应能力:) – Troyer

在所有媒体查询中设置最小高度 –

你可以尝试JavaScript来做到这一点。因为在更换设备时，引导列正在改变宽度超时。我喜欢它，它无类型，你可以把这个类在你的形象包装和产品包装DESCRIPT像这样：

var st = $('.squarethis').width(); 
 
$('.squarethis').css({'height':st+'px'}); 
 
$('.sameheight').css({'height':st+'px'});

.wrapper{ 
 
background:#ccc; 
 
width:100%; 
 
height:100%; 
 
display:flex; 
 
flex-wrap:wrap; 
 
flex-direction:row;} 
 

 
.prodImage{ 
 
width:30%; 
 
background:red;} 
 

 
.prodDesc{ 
 
width:70%; 
 
background:green;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="wrapper"> 
 
<div class="prodImage squarethis"></div> 
 
<div class="prodDesc sameheight"></div> 
 
</div>

它将适用于你的引导。尝试输入这个。

让我解释发生了什么：

$('.squarethis').css({'height':st+'px});它会让你的形象总是方形的，你使用的是什么设备也不在乎。
$('.sameheight').css({'height':st+'px'});这个东西会让你的下一个引导柱符合上一个柱的高度。

不要在你的形象包装和说明包装

来源

2016-12-15 08:55:37 Obink

@Troyer自启动col每次改变宽度，你无法猜测现在该设备中的高度。不幸的是，我不知道css有技术来理解“它是多高”。你的受欢迎人。 – Obink

我建议你看看bootstrap v4附带真棒功能，如flexbox grid忘记输入一个类。

它不正是你需要 - 例如：

#foo{ 
 
    background-color: aqua; 
 
    height: 300px; 
 
} 
 

 
#bar{ 
 
    background-color: yellow; 
 
}

<link href="https://cask.scotch.io/bootstrap-4.0-flex.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-sm-6" id="foo">foo</div> 
 
    <div class="col-sm-6" id="bar">bar</div> 
 
    </div> 
 
</div>

JSFiddle

来源

2016-12-15 09:22:13 Vucko

您可以调整使用纯CSS这种细胞（产品说明）。只要一点点修改类.border-l-default：

.border-l-default { 
    border-left: 1px solid blue; 
    height: 100%; 
    position: absolute; 
    right: 0; 
}

bootply

来源

2016-12-15 09:37:18 Banzay

两列相同高度 - Bootstrap - CSS

回答

相关问题