我有两个要 float 在同一行上的 div。在窗口宽度达到 250 像素左右之前,我不想换行。
我将 div 的初始宽度设置为百分比,这似乎会导致问题。右边的 div 在缩小到最小宽度 100px 之前会自动换行;
<div id="#container">
<div id="left">
<div id="box"></div>
</div>
<div id="right">
<h1>Hello World</h1>
</div>
</div>
#container {
display: table;
width: 100%;
}
#box {
width: 100px;
height: 100px;
background: gray;
display: inline-block;
max-width: 100%;
}
#left {
float: left;
width: 23.6%;
min-width:150px;
background: gold;
text-align: center;
}
#right {
float: left;
width: 76.4%;
min-width:100px;
background: pink;
}
最佳答案
删除右侧 div 的宽度部分解决了问题。
但看起来我不得不求助于使用 display:table*
<div id="container">
<div class="tr">
<div id="left" class="td">
<div id="box"></div>
</div>
<div id="right" class="td">
<!-- <h1>Hello World</h1> -->
</div>
</div>
</div>
#container {
display: table;
width: 100%;
background: red;
height: 100px;
}
#box {
width: 100px;
height: 100px;
background: gray;
display: inline-block;
max-width: 100%;
}
#left {
width: 25%;
min-width:150px;
background: gold;
text-align: center;
height: 100%;
}
#right {
min-width:100px;
background: pink;
width: 75%;
vertical-align: bottom;
}
.tr {
display: table-row;
width: 100%;
}
.td {
display: table-cell;
}
@media only screen and (max-width: 600px) {
#left, #right {
display:block;
width: 100%;
min-height: 100px;
}
.tr {
display: block;
}
#container {
display: block;
}
}
关于css - 窗口调整大小时, float 的 Div 标签换行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24105992/