如何根据div中的文本调整div的大小
塞雷尼
我有不同div的，看起来像这样：
<div class="marker marker-availability" style="left: 975.516px; top: 346.265px;">
<span class="marker-label">Tenten comfort</span>
<div style="background-color:#7ba1bc" class="cluster-background">
<span class="marker-id">81</span>
</div>
</div>
<div class="marker marker-availability">
<span class="marker-label">Standaard kampeerplaatsen</span>
<div style="background-color:#d99200" class="cluster-background">
<span class="marker-id">81</span>
</div>
</div>
但是现在我遇到了一个问题，因为我:after在图像的底部设置了一个图像，如下所示：
现在您已经很清楚地看到了这个问题，我尝试将设置height为auto并设置为an，min-height但这并不能解决问题。
我重新创建了一个jsfiddle：jsfiddle
这是我的更少的代码：
&.marker-availability {
display: block;
width: 120px;
height: 23px;
color: #fff;
background-color: #6f6926;
border: 2px solid #fff;
border-radius: 2px;
margin-left: -60px;
margin-top: -26px;
.marker-label {
margin-top: 1px;
margin-left: 1px;
font-size: 12px;
font-weight: 500;
color: #fff;
}
.cluster-background {
.square(25px);
background-color: black;
color: #fff;
margin-top: -30px;
margin-left: -12px;
border-radius: 50%;
&:after {
.retina-image('/img/map/clustermarker-point.png', '/img/map/clustermarker-pointx2.png', 184px, 55px);
.pos-b-l(-26px, 50%);
.translate(-50%, -50%);
content: "";
display: block;
width: 120px;
height: 20px;
background-repeat: no-repeat;
}
}
.marker-id {
padding-top: 1px;
padding-left: 1px;
font-size: 15px;
}
}
因此，我的问题是可以使它看起来像这样：
还是因为：after图像的位置而无法
克里斯多夫
问题主要是您的负边距，应尽可能避免。
我已经更新了您的示例，您只需要调整填充即可：
https://jsfiddle.net/txsv0ha5/
删除：
margin-top: -30px;
margin-left: -12px;
同样，您的底部背景不应该是彩色圆圈的：after元素，而应该是整个标记本身。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
如何根据div中的文本调整div的大小
- 2
如何根据div宽度调整图像大小？
- 3
根据页面大小和可用空间动态调整Div标签中的文本大小
- 4
调整div中的文本大小调整img大小
- 5
根据子DIV中的内容调整容器DIV的大小
- 6
圈子div中的文字。根据内容调整Div大小
- 7
<div>元素：调整大小时如何使div文本保持原样
- 8
如何调整div的大小
- 9
根据视频大小调整div的大小
- 10
如何根据视口大小调整Div高度？
- 11
根据容器中的图像动态调整容器DIV的大小
- 12
如何根据.kv文件中的屏幕动态调整文本大小
- 13
如何使用其中的文本大小调整div宽度
- 14
Div中混合内容（图像/文本）的大小调整
- 15
当浏览器调整大小时，如何截断div或单元格中的文本
- 16
调整浏览器大小时如何隐藏DIV中的部分HTML文本？使用 CSS）
- 17
根据动态内容动态调整div的大小？
- 18
根据可用空间调整嵌套div的大小
- 19
如何根据页面高度调整文本大小？
- 20
如何根据可用的div区域大小剪切长文本？
- 21
动态调整div中文本的大小
- 22
如何根据内部元素的大小创建可调整大小的div
- 23
如何使div对齐并根据浏览器大小调整大小
- 24
如何使div对齐并根据浏览器大小调整大小
- 25
如何根据浏览器大小调整DIV元素的大小？
- 26
如何根据背景图片大小自动调整div的大小？
- 27
如何处理div中调整大小的开始？
- 28
更改DIV中的文本后，无法使用jquery调整DIV的大小
- 29
根据窗口大小调整div以及内部内容的大小
我来说两句