Question

我有一行有两列：

第一列包含一个svg，其大小在viewbox和col-md-8
第二列包含可变大小的文本

我希望所有列的大小相同（第一列的大小由svg定义）如果第二个大小的包含太长我想要使用此列的滚动

我已尝试使用flex，但它是确定任何其他解决方案大小的最大列

ps：宽度不是问题，我搜索第二个div的高度来定义第一个div的高度而不使用style =＆＃39; height：xx％＆＃39;或者px

代码：

＆＃13;

.equal, .equal > div[class*='col-'] {  
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex:1 0 auto;

＆＃13;

<div class="row equal">
  <div class="col-md-8">
    <svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" version="1.1" viewBox="0 0 1500 500"></svg>
  </div>
  <div class="col-md-4" style="overflow-y:scroll">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
    </p>
  </div>
</div>

＆＃13;

Answer 1

我在这里使用bootstrap创建了一个小提琴https://jsfiddle.net/jn9cwngs/3/

在这里你可以看到，我已经删除了你所有的CSS并改变了你的HTML有点像这样：

<div class="col-xs-4">

您可以根据需要使用col-*。

我用一个简单的js来定义内容的高度为svg

jQuery(function(){
  var images = $('svg');
  var height;
  images.each(function(){
    var image = $(this);
    height = image.height();
  });
  var content = $('.description');
  content.each(function(){
    var text = $(this);
    text.height(height);
  });
});

Boostrap根据第一列的功能修复列的大小

1 个答案: