内部柔性容器时图像的高度增加(Image's height increases when inside flex container)
当我将div.container的样式div.container为display: flex ,图像高度会增加。 我该如何阻止这种情况发生?
之前:
$('.text').prev('img').css('height',$('.text').outerHeight());div.container { border: 1px solid; } img { float: left; }<script src="https://code.jquery.com/jquery-1.12.4.js"></script> <div class="container"> <img src="https://images-na.ssl-images-amazon.com/images/M/MV5BMzg2Mjg1OTk0NF5BMl5BanBnXkFtZTcwMjQ4MTA3Mw@@._V1_SX300.jpg" alt="RED" /> <div class="text"> <h2>Red</h2> <p>When his peaceful life is threatened by a high-tech assassin, .</p> </div> </div>后:
$('.text').prev('img').css('height',$('.text').outerHeight());div.container { border: 1px solid; display: flex; } img { float: left; }<script src="https://code.jquery.com/jquery-1.12.4.js"></script> <div class="container"> <img src="https://images-na.ssl-images-amazon.com/images/M/MV5BMzg2Mjg1OTk0NF5BMl5BanBnXkFtZTcwMjQ4MTA3Mw@@._V1_SX300.jpg" alt="RED" /> <div class="text"> <h2>Red</h2> <p>When his peaceful life is threatened by a high-tech assassin, .</p> </div> </div>When I change the style of div.container to display: flex, the images height increases. How do I stop this from happening?
Before:
$('.text').prev('img').css('height',$('.text').outerHeight());div.container { border: 1px solid; } img { float: left; }<script src="https://code.jquery.com/jquery-1.12.4.js"></script> <div class="container"> <img src="https://images-na.ssl-images-amazon.com/images/M/MV5BMzg2Mjg1OTk0NF5BMl5BanBnXkFtZTcwMjQ4MTA3Mw@@._V1_SX300.jpg" alt="RED" /> <div class="text"> <h2>Red</h2> <p>When his peaceful life is threatened by a high-tech assassin, .</p> </div> </div>After:
$('.text').prev('img').css('height',$('.text').outerHeight());div.container { border: 1px solid; display: flex; } img { float: left; }<script src="https://code.jquery.com/jquery-1.12.4.js"></script> <div class="container"> <img src="https://images-na.ssl-images-amazon.com/images/M/MV5BMzg2Mjg1OTk0NF5BMl5BanBnXkFtZTcwMjQ4MTA3Mw@@._V1_SX300.jpg" alt="RED" /> <div class="text"> <h2>Red</h2> <p>When his peaceful life is threatened by a high-tech assassin, .</p> </div> </div>最满意答案
display: flex元素将具有样式align-items: stretch默认为align-items: stretch 。 您可以将其更改为align-items: flex-start以避免您的子元素与其最高兄弟的高度相匹配。
A display: flex element will have the style align-items: stretch by default. You can change that to align-items: flex-start to avoid your child elements matching the height of their tallest sibling.
更多推荐
发布评论