由于文本包装(css)而更改了Div位置。
由于文本包装(css)而更改了Div位置。
提问于 2015-06-15 03:17:38
我有一个布局如下所示的图片和文字在个人电视。我这里的问题是，当文本太长时，div的位置被更改为，看起来不太好。
例如，您可以运行下面的代码段，可以看到带有文本“网格组合线图”的div，您可以发现它的位置由于文本太长而移动。
你对这个问题有什么解决办法吗？非常感谢！
我认为下面你需要注意的样式只有"pic_small_container“、"pic_small”和"demo_illus“。
.overallPanel1 {
border-width: 1px;
border-color: #BDBDBD;
margin: 1.875em 0 3.75em 4.065em;
}
.pic_small {
border: solid;
border-width: 1px;
border-color: #BDBDBD;
width: 12.5em;
height: 10.4em;
}
.pic_small_container {
text-align: center;
padding: 0 4em 4.375em 0;
display: inline-block;
}
.demo_illus {
text-decoration: none;
font-family: 'Arial';
font-weight: 200;
font-style: normal;
font-size: 0.875em;
color: #3498DB;
}
.overview_page_title {
text-decoration: none;
font-family: 'Calibri';
font-weight: 700;
font-style: normal;
font-size: 1.1em;
margin-left: 1.875em;
}
.overview_chart_title {
text-decoration: none;
font-family: 'Calibri';
font-weight: 500;
font-style: normal;
font-size: 1.1em;
}
.picPanel {
margin-top: 1.125em;
}<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charset="UTF-8">
<title>Chart Demo Overview</title>
<link href="resources/demoStyle.css" rel="stylesheet">
</head>
<body>
<div style="margin-top: 0.9em">
<a class="overview_page_title">Demo Overview</a>
<div class="overallPanel1">
<a class="overview_chart_title">Trellis</a><br>
<div class="picPanel">
<div class="pic_small_container">
<img class="pic_small" src="resources/svg/line.svg"><br>
<a class="demo_illus" href="index.html?chartType=trellis_bar">Trellis Chart</a>
</div>
<div class="pic_small_container">
<img class="pic_small" src="resources/svg/horizontal_line.svg"><br>
<a class="demo_illus" href="index.html?chartType=trellis_stacked_bar">Trellis Stacked Bar Chart</a>
</div>
<div class="pic_small_container">
<img class="pic_small" src="resources/svg/horizontal_line.svg"><br>
<a class="demo_illus" href="index.html?chartType=trellis_line">Trellis Line Chart</a>
</div>
<div class="pic_small_container">
<img class="pic_small" src="resources/svg/horizontal_line.svg"><br>
<a class="demo_illus" href="index.html?chartType=trellis_pie">Trellis Pie Chart</a>
</div>
<div class="pic_small_container">
<img class="pic_small" src="resources/svg/horizontal_line.svg"><br>
<a class="demo_illus" href="index.html?chartType=trellis_donut">Trellis Donut Chart</a>
</div>
<div class="pic_small_container">
<img class="pic_small" src="resources/svg/horizontal_line.svg"><br>
<a class="demo_illus" href="index.html?chartType=trellis_combination">Trellis Combined Column Line Chart</a>
</div>
<div class="pic_small_container">
<img class="pic_small" src="resources/svg/horizontal_line.svg"><br>
<a class="demo_illus" href="index.html?chartType=trellis_horizontal_combination">Trellis Combined Bar Line Chart</a>
</div>
<div class="pic_small_container">
<img class="pic_small" src="resources/svg/horizontal_line.svg"><br>
<a class="demo_illus" href="index.html?chartType=trellis_bubble">Trellis Combined Bubble Chart</a>
</div>
<div class="pic_small_container">
<img class="pic_small" src="resources/svg/horizontal_line.svg"><br>
<a class="demo_illus" href="index.html?chartType=trellis_scatter">Trellis Combined Scatter Chart</a>
</div>
<div class="pic_small_container">
<img class="pic_small" src="resources/svg/horizontal_line.svg"><br>
<a class="demo_illus" href="index.html?chartType=trellis_area">Trellis Area Chart</a>
</div>
</div>
</div>
</div>
</body>
</html>
回答 1
Stack Overflow用户
发布于 2015-06-15 04:59:56
如果您并不真正关心像ie7 ie8这样的旧浏览器，那么您可以使用它。
只需在css中更新下面的内容。
.pic_small_container{
................
................
max-width: 200px;
vertical-align: top;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/30836882
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号