我有两个潜水员并排在一个flexxbox。右手边的那条应该总是一样宽,我想让左手边的那条抓住剩下的空间。但它不会,除非我特别设置它的宽度。
所以目前,它被设置为96%,看起来还可以,直到你真的压扁屏幕-然后右边的div就会有点缺乏它所需要的空间。
我想我可以让它保持现状,但这感觉不对——就像必须有一种方式说:
正确的总是一样的;你在左边,你得到所有剩下的东西
.ar-course-nav { cursor: pointer; padding: 8px 12px 8px 12px; border-radius: 8px; } .ar-course-nav:hover { background-color: rgba(0, 0, 0, 0.1); } <br/> <br/> <div class="ar-course-nav" style="display:flex; justify-content:space-between;"> <div style="width:96%;"> <div style="overflow:hidden; white-space:nowrap; text-overflow:ellipsis;"> <strong title="Course Name Which is Really Quite Long And Does Go On a Bit But Then When You Think it's Stopped it Keeps on Going for even longer!"> Course Name Which is Really Quite Long And Does Go On a Bit But Then When You Think it's Stopped it Keeps on Going for even longer! </strong> </div> <div style="width:100%; display:flex; justify-content:space-between;"> <div style="color:#555555; margin-right:8px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;" title="A really really really really really really really really really really really long department name"> A really really really really really really really really really really really long department name </div> <div style="color:#555555; text-align:right; white-space:nowrap;"> Created: 21 September 2016 </div> </div> </div> <div style="margin-left:8px;"> <strong>></strong> </div> </div>