Question

我在引导网格中并排有两列。我需要强制第二列不要高于第一列。我知道如何使用广泛的display：table方法强制第二列依靠第一列获得全高。但是如何管理反过来呢？我更喜欢使用css的解决方案，如果可能的话没有js。第一个包含响应图像，第二个包含文本。如果文本需要比图像更多的空间，则文本应滚动。

<div class="row">       
<div class="col-xs-6 first">
    <img class="img-responsive" src="image/example.jpg" />
</div>
<div class="col-xs-6 second">
    <p>
        Some text lore ipsum etc etc<br />
        Some text lore ipsum etc etc<br />
        Some text lore ipsum etc etc<br />
        Some text lore ipsum etc etc<br />
        Some text lore ipsum etc etc<br />
        Some text lore ipsum etc etc<br />
        Some text lore ipsum etc etc<br />
        Some text lore ipsum etc etc<br />
        Some text lore ipsum etc etc<br />
    </p>
</div>

Answer 1

您可以在此处查看此示例

如果您想对与图片相关的文字div进行高度调整，那么您可以使用max-height <{p>}的css属性进行高度调整

您可以根据需要增加和减少max-height财产。

然后给overflow-y: auto滚动。

希望这会对你有所帮助。

＆＃13;

.second {
 max-height: 165px;
 overflow-y: auto;
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="row">       
<div class="col-xs-6 first">
    <img class="img-responsive" src="https://dummyimage.com/600x400/000/fff" />
</div>
<div class="col-xs-6 second">
    <p>
        Some text lore ipsum etc etc<br />
        Some text lore ipsum etc etc<br />
        Some text lore ipsum etc etc<br />
        Some text lore ipsum etc etc<br />
        Some text lore ipsum etc etc<br />
        Some text lore ipsum etc etc<br />
        Some text lore ipsum etc etc<br />
        Some text lore ipsum etc etc<br />
        Some text lore ipsum etc etc<br />
    </p>
</div>

＆＃13;

如何将网格中的右列缩小到最大值左列的100％？

1 个答案: