可滚动 display:table-cell - 不能有固定尺寸
scrollable display:table-cell - not able to have fixed dimensions
我正在使用应用于某些 div 的 display:table
、table-row
、table-cell
样式。其中一个 table 单元格中有一个巨大的图像。我想为单元格设置固定的宽度和高度,并使其可滚动,以便您可以在图像中移动。
问题是使用 overflow:scroll
,甚至 overflow:hidden
,具有固定的宽度和高度似乎不会强制 table-cell 的大小。
如何强制包含图像的 div 成为固定的 height/width?
.table-wrap{
display:table;
}
.table-wrap > div{
display:table-row;
}
.table-wrap > div > div{
display:table-cell;
}
#map{
width:100px;
height:100px;
overflow:scroll;
}
<div id="interface">
<div class="table-wrap">
<div id="top">
<div id="map">
<img src="http://www.planwallpaper.com/static/images/ZhGEqAP.jpg">
</div>
<div id="sidebar">
sidebar
</div>
</div>
</div>
<div class="table-wrap">
<div id="bottom">
<div class="bla">
bla
</div>
<div class="bla">
bla
</div>
<div class="bla">
bla
</div>
</div>
</div>
</div>
由于 CSS 使用的 table algorithm
,您将无法限制 table-cell
内的图像,除非您直接在 [=14] 上提供图像=]元素.
我认为你最好的选择是使用 position
和 img
作为 absolute
并让它看起来像你想要的那样。
下面的片段:
.table-wrap {
display: table;
width: 100%;
}
.table-wrap > div {
display: table-row;
}
.table-wrap > div > div {
display: table-cell;
border: 1px solid;
}
#map {
width: 100px;
height: 100px;
overflow: auto;
position: relative;
}
#map img {
position: absolute;
top: 0;
left: 0;
}
<div id="interface">
<div class="table-wrap">
<div id="top">
<div id="map">
<img src="http://www.planwallpaper.com/static/images/ZhGEqAP.jpg">
</div>
<div id="sidebar">
sidebar
</div>
</div>
</div>
<div class="table-wrap">
<div id="bottom">
<div class="bla">
bla
</div>
<div class="bla">
bla
</div>
<div class="bla">
bla
</div>
</div>
</div>
</div>
我正在使用应用于某些 div 的 display:table
、table-row
、table-cell
样式。其中一个 table 单元格中有一个巨大的图像。我想为单元格设置固定的宽度和高度,并使其可滚动,以便您可以在图像中移动。
问题是使用 overflow:scroll
,甚至 overflow:hidden
,具有固定的宽度和高度似乎不会强制 table-cell 的大小。
如何强制包含图像的 div 成为固定的 height/width?
.table-wrap{
display:table;
}
.table-wrap > div{
display:table-row;
}
.table-wrap > div > div{
display:table-cell;
}
#map{
width:100px;
height:100px;
overflow:scroll;
}
<div id="interface">
<div class="table-wrap">
<div id="top">
<div id="map">
<img src="http://www.planwallpaper.com/static/images/ZhGEqAP.jpg">
</div>
<div id="sidebar">
sidebar
</div>
</div>
</div>
<div class="table-wrap">
<div id="bottom">
<div class="bla">
bla
</div>
<div class="bla">
bla
</div>
<div class="bla">
bla
</div>
</div>
</div>
</div>
由于 CSS 使用的 table algorithm
,您将无法限制 table-cell
内的图像,除非您直接在 [=14] 上提供图像=]元素.
我认为你最好的选择是使用 position
和 img
作为 absolute
并让它看起来像你想要的那样。
下面的片段:
.table-wrap {
display: table;
width: 100%;
}
.table-wrap > div {
display: table-row;
}
.table-wrap > div > div {
display: table-cell;
border: 1px solid;
}
#map {
width: 100px;
height: 100px;
overflow: auto;
position: relative;
}
#map img {
position: absolute;
top: 0;
left: 0;
}
<div id="interface">
<div class="table-wrap">
<div id="top">
<div id="map">
<img src="http://www.planwallpaper.com/static/images/ZhGEqAP.jpg">
</div>
<div id="sidebar">
sidebar
</div>
</div>
</div>
<div class="table-wrap">
<div id="bottom">
<div class="bla">
bla
</div>
<div class="bla">
bla
</div>
<div class="bla">
bla
</div>
</div>
</div>
</div>