- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在使用应用于某些 div 的 display:table
、table-row
、table-cell
样式。其中一个表格单元格中有一个巨大的图像。我想为单元格设置固定的宽度和高度,并使其可滚动,以便您可以在图像中移动。
问题是使用overflow:scroll
,甚至是overflow:hidden
,具有固定的宽度和高度似乎不会强制表格单元格的大小.
如何强制包含图像的 div 具有固定的高度/宽度?
.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 算法
,您将无法将图像限制在 table-cell
中,除非您直接在img
元素。
我认为你最好的选择是使用 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>
关于html - 可滚动显示 :table-cell - not able to have fixed dimensions,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39307520/
我的代码如下所示: unemp n)) stop("wrong embedding dimension") : argument is of length zero Called from: emb
Macports 更新后,我认为更新了 numpy,我收到警告: VisibleDeprecationWarning: boolean index did not match indexed arra
我试图使用 MNIST 数据集实现简单的神经网络,但我不断收到此错误 将 matplotlib.pyplot 导入为 plt import torch from torchvision import
我编写了自己的相机 Activity ,我在FrameLayout中显示照片的实时预览,但是实时图片看起来不自然,有点高,我认为这是因为尺寸FrameLayout 的尺寸与相机的尺寸不匹配。我应该做什
tf.reduce_mean() 函数以 axis 参数中引用的索引的方式对数组元素求和。 在下面的代码中: import tensorflow as tf x = tf.Variable([1, 2
我有一个航类延误数据电子表格,我正在处理一个显示每个机场总延误时间的工作表。我想过滤维度“机场”,即根据每个机场的起飞次数创建机场类别,“小型”、“中型”和“大型”,这是通过计算维度“航类号”计算得出
如何在 3 列 X_train 数据上使用以下代码。错误 "ValueError: query data dimension must match training data dimension" 在
JavaScript:给定一个字符串数组: ['properties.dimensions.length', 'properties.name'] 在散列中使用这些来验证或访问它们(实际上只是想验证
JavaScript:给定一个字符串数组: ['properties.dimensions.length', 'properties.name'] 在散列中使用这些来验证或访问它们(实际上只是想验证
我有以下代码用于整数 vector 的 vector (即整数矩阵..) vector > scores (3, vector(2,0)); cout<
尽管已经有很多关于这个主题的答案,但在下面的例子中没有看到(摘自 https://gist.github.com/lirnli/c16ef186c75588e705d9864fb816a13c on
我有一堆保证有的图片: 最小宽度 = 200 像素 最大宽度 = 250 像素 最小高度 = 150 像素 最大高度 = 175 像素 我想要做的是显示一个由 200 像素 x 150 像素组成的图像
转tensorrt时报错: input: kMAX dimensions in profile 0 are [2,3,128,128] but input has static dimensions
我正在尝试对在 UCI 机器学习数据库中找到的一些文本识别数据进行 k 最近邻预测。 (https://archive.ics.uci.edu/ml/datasets/Letter+Recogniti
如何有效地在更高维空间上追踪等值面 最佳答案 你有一个 N 维的标量成本函数, f(y0, y1, .., yN) ∊ ℝ, y ∊ ℝ 但仅在规则的矩形网格中采样, yk = Ψk + ψk x
我正在尝试根据《Doing Bayesian Data Analysis: A Tutorial with R, JAGS, and Stan (2015)》一书来学习贝叶斯分析。 这本书里有例子。所
LEt x_t = F(x_{t-1}) 是 chaotic regime. 中的一个时间离散动力系统 从初始条件x_0开始,我们可以生成一个时间序列=x_t,其中t =1,2,...,T 表示时间索
当我尝试使用: const {width, height} = Dimensions.get('window'); 在 React Native 组件上,我收到一个以前从未见过的奇怪错误: 找不到变量
关闭。这个问题是opinion-based .它目前不接受答案。 想要改进这个问题? 更新问题,以便 editing this post 可以用事实和引用来回答它. 关闭 2 年前。 Improve
已关闭。此问题不符合Stack Overflow guidelines 。目前不接受答案。 这个问题似乎与 help center 中定义的范围内的编程无关。 . 已关闭 9 年前。 Improve
我是一名优秀的程序员,十分优秀!