如何防止div文本下降到容器底部？
如何防止div文本下降到容器底部？
提问于 2021-12-07 20:19:38
我想改变div文本的样式，同时保持它在容器的顶部。我的当前脚本(下面)将div文本呈现在容器的顶部，而不需要样式设置(粗体、下划线、斜体等)
<head>
<script src="https://cdn.plot.ly/plotly-2.6.3.min.js"></script>
<style>
#chart1 {
width: 360px;
height: 400px;
position: absolute;
top: 100px;
left: 0px;
text-align: center;
}
</style>
</head>
<body>
<div id="chart1">Chart 1 Title</div>
<script>
CHART1 = document.getElementById('chart1')
Plotly.newPlot( CHART1,
[{
type: 'pie',
values: [60,40]
}],
{margin: {t:0}}
)
</script>
</body>
当我简单地将div文本包装在：<b>text</b>中时，它会自动将文本放到容器的底部。我不知道这是否与实际使用有关。
<head>
<script src="https://cdn.plot.ly/plotly-2.6.3.min.js"></script>
<style>
#chart1 {
width: 360px;
height: 400px;
position: absolute;
top: 100px;
left: 0px;
text-align: center;
}
</style>
</head>
<body>
<div id="chart1"><b>Chart 1 Title</b></div>
<script>
CHART1 = document.getElementById('chart1')
Plotly.newPlot( CHART1,
[{
type: 'pie',
values: [60,40]
}],
{margin: {t:0}}
)
</script>
</body>
我试过：
在CSS styling
- adjusting中添加
vertical-align: top;，container
- increasing的边距元素，容器的大小，以查看文本是否被“压缩”到
底部。
有人能发现我所犯的错误或解决这个问题的方法吗？
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-12-07 20:38:11
因为在第一个例子中：
<div id="chart1"> Chart 1 Title <div> pieChart here </div> </div>
在第二个片段中:是
<div id="chart1"> <div> pieChart here </div> <b> Chart 1 Title </b> </div>
因此，第二个片段中的标题在pieChart div下面。
您需要在 div之前插入标题，请参见下面
<head>
<script src="https://cdn.plot.ly/plotly-2.6.3.min.js"></script>
<style>
#parentDiv {
width: 360px;
height: 400px;
position: absolute;
top: 100px;
left: 0px;
text-align: center;
}
</style>
</head>
<body>
<div id="parentDiv">
<b>Chart 1 Title</b>
<div id="chart1"></div>
</div>
<script>
CHART1 = document.getElementById('chart1')
Plotly.newPlot( CHART1,
[{
type: 'pie',
values: [60,40]
}],
{margin: {t:0}}
)
</script>
</body>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70269906
复制相关文章
相似问题
腾讯云开发者
