我需要两列布局,就像表格一样,我不知道列有多宽。
我需要右列与其内容一样宽(无自动换行),左列占用剩余空间,如果没有可用空间,则进行自动换行。
右列没问题,而左div mainInfos
如果内容需要,它会放在它上面。
我希望列并排放置。我该怎么做才能达到这个结果?
容器具有固定宽度。我不想使用jquery。
#post {
overflow: hidden;
width: 400px;
border: solid 1px;
}
#post .mainInfos {
overflow: hidden;
}
#post .details {
float: right;
}
<div id="post">
<div class="mainInfos">really really long content that should be wrapped and should be all at the left of "small content", on the same line</div>
<div class="details">small content</div>
</div>
适用于新旧浏览器的 flexbox 的一种替代方法是在内部div 上使用 display:table-cell
:
#post {
overflow: hidden;
width: 400px;
border: solid 1px;
}
#post > div {
display: table-cell;
}
#post .details {
white-space: nowrap;
}
<div id="post">
<div class="mainInfos">really really long content that should be wrapped and should be all at the left of "small content", on the same line</div>
<div class="details">small content</div>
</div>
你可以为此使用弹性框:
-
将
display: flex
添加到容器post
-
将
white-space: nowrap
添加到details
以防止其换行 -
将
flex: 1
添加到mainInfos
,使其占用剩余空间。
请参阅下面的演示:
#post {
display: flex;
width: 400px;
border: solid 1px;
}
#post .mainInfos {
flex: 1;
}
#post .details {
white-space: nowrap;
}
<div id="post">
<div class="mainInfos">really really long content that should be wrapped and should be all at the left of "small content", on the same line</div>
<div class="details">small content</div>
</div>
使用 Flexbox,首先删除右列上的浮点数:。添加到父元素 (#post) 这个,
display: flex
文档在这里
请检查示例。我想这会对你有所帮助。
#post {
-webkit-box-align: center;
-webkit-align-items: center;
-moz-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 0;
-webkit-flex: 0 0 400px;
-moz-box-flex: 0;
-ms-flex: 0 0 400px;
flex: 0 0 400px;
overflow: hidden;
width: 400px;
border: solid 1px;
margin-left: auto;
margin-right: auto;
margin-top: 50px;
padding: 5px;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-moz-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
#post .mainInfos,
#post .details {
-webkit-box-align: center;
-webkit-align-items: center;
-moz-box-align: center;
-ms-flex-align: center;
align-items: center;
background-color: #f6f6f6;
border: 1px solid #989898;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-moz-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
padding: 10px;
}
<div id="post">
<div class="mainInfos">
really really long content that should be wrapped and should be all at the left of "small content", on the same line
<br />
really really long content that should be wrapped and should be all at the left of "small content", on the same line
</div>
<div class="details">
small content<br />
small content<br />
small content<br />
small content<br />
<br />
really really long content that should be wrapped and should be all at the left of "small content", on the same line
</div>
</div>