在网页中,我的布局有以下标记
<div class="parent">
<div class="left-content"></div>
<div class="right-content"></div>
</div>
给定标记的样式是:
.parent{
display:table;
width:100%;
}
.parent > .left-content{
width:auto;
}
.parent > .right-content{
width:320px;
}
如何让“right-content”占据可用宽度的 320px 而“left-content”div 占据所有剩余宽度?
请注意:我不能使用以下技术来实现此行为,因为我的布局是响应式的,我需要将“右内容”移动到“左内容”的底部具体决议。
标记:
<div class="parent">
<div class="right-content"></div>
<div class="left-content"></div>
</div>
样式
.parent{
display:block;
width:100%;
}
.parent > .left-content{
width:auto;
}
.parent > .right-content{
width:320px;
float:right;
}
最佳答案
为了让事情变得更简单,我会先更改标记,让您的左侧内容位于右侧内容下方(根据智能手机分辨率的要求)。
<div class="left-content"></div>
<div class="right-content"></div>
接下来,因为您的第一个 div 是占用剩余宽度的那个,所以简单的解决方案似乎是 display:table-cell
(父级为 display:table
).它看起来也适用于内联 block 或 float ,但您可能不得不求助于 width: calc(100% - 320px);
这样的东西,所以我更喜欢表格解决方案。
接下来,您添加一个简单的媒体查询以更改回较低分辨率的 block 。
.parent {
display: table;
width: 100%;
}
.parent > .left-content {
display: table-cell;
width: auto;
/* Added for visualisation */
background: blue;
height: 50px;
}
.parent > .right-content {
display: table-cell;
width: 320px;
/* Added for visualisation */
height: 50px;
background: red;
}
/* Media query */
@media(max-width: 550px) {
.parent > .left-content {
display: block;
}
.parent > .right-content {
display: block;
width: 100%;
}
}
<div class="parent">
<div class="left-content">Left</div>
<div class="right-content">Right</div>
</div>
关于html - 响应式设计跨浏览器中的表格布局,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30543457/