0
我将一个Plotly图像合并到一个html文件中。我想制作六个盒子，每行三个，然后在每个盒子中放入图像。事情工作正常，但我不能垂直拉伸情节剧情。我试图通过增加像素和％的高度来增加高度，但这只会增加框的大小而不会增加图像的高度。如何在html中增加图形图像的高度？
我使用的CSS主要来自一个帖子在stackoverflow。 CSS: Can a div "float:middle" rather than "float:left;" with margin-left?
HTML文件是：
<!DOCTYPE html>
<!--It's a best practice to always declare DOCTYPE!-->
<html lang="en">
<head>
<title>Making a Table</title>
<meta charset="utf-8">
</head>
<body>
<header>
<h2>Draft template for Presentation</h2>
<h1>Plots and maps</h1>
</header>
<section id="content">
<div class="boxes">
<div class="box leftbox">
<iframe src="https://plot.ly/~shais2267/0/lat-vs-long.embed" frameborder="0" allowfullscreen></iframe>
</div>
<div class="box"></div>
<div class="box rightbox"></div>
</div>
<div class="boxes">
<div class="box leftbox"></div>
<div class="box"></div>
<div class="box rightbox"></div>
</div>
</section>
</body>
</html>
CSS文件是：
body {
background-color: #4ABDAC;
color: #FFFFFF;
font-family: Georgia, serif;
}
header {
background-color: #F7B733;
height: 75px;
}
h1 {
padding: 15px;
}
h2{
text-align: right;
float: right;
padding-right: 20px;
}
.boxes {width:90%;
text-align:center;
margin: 5;
padding: 5;
margin-left: auto;
margin-right: auto;
margin-top: none;
margin-bottom: none;
border-top: 4px solid #00ccff;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
background-color: white;
border-bottom: 4px solid #00ccff;
}
.boxes .box {width:30%; height:250px; background:#f0f0f0; display:inline-block}
.leftbox {float:left;height:250px}
.rightbox {float:right;}
#content {
background-color: #DFDCE3;
width: 100%;
height: 322px;
margin: 0 auto;
}
这可能在codepen.io找到
https://codepen.io/shammun/pen/xRYaxV
好吧，所以我实际上是在滑动和滑动，iframe中的高度和宽度似乎不起作用。出于这个原因，我使用类和ID来调整图形大小。我用你提到的选项，它没有给我一个适当的对齐图片。我想我将不得不使用class和/或id来正确设置图片。 –
@KoushikChowdhury：查看更新后的答案。 –
刚刚做到了。我使用了以下行：