我在調整表格列大小時遇到問題。當我將條形圖和圖像幻燈片并排放在單獨的 div 中時，這會導致表格列縮小。下圖顯示了它的樣子。第一個表列應該類似于圖表中顏色的鍵。我嘗試調整 CSS 中的寬度，但它調整的是圖形寬度，而不是表格列寬度。CSS 是否有問題，或者 HTML 中的 div 導致了問題？感謝您的幫助。超文本標記語言 <div class="graph"> <div class="positive">34%</div> </div> <div class="graph"> <div class="negative">23%</div> </div> <div class="graph"> <div class="mixed">43%</div> </div> <table id="tableSentiment" border="1"> <tr> <td id="tableColour" style="background-color: #1E8449"></td> <td>Positive</td> </tr> <tr> <td id="tableColour" style="background-color: #CB4335"></td> <td>Negative</td> </tr> <tr> <td id="tableColour" style="background-color: #E67E22"></td> <td>Mixed</td> </tr></table> CSS.graph{ width: 20%; background-color: #aaa; border: 0.5px solid black;}.positive, .negative, .mixed{ text-align: right; padding-top: 5px; padding-bottom: 5px; color: white;}.positive { width: 34%; background-color: #1E8449;}.negative { width: 23%; background-color: #CB4335;}.mixed { width: 43%; background-color: #E67E22;}#tableSentiment{ border-collapse: collapse; padding: 10px; width: 15%; text-align: center; font-size: 100%; left: 10%;}#tableColour{ width: 15%;}
1 回答
飲歌長嘯
TA貢獻1951條經驗 獲得超3個贊
如果我對您想要實現的目標有正確的解釋，您可能實際上想要使用網格布局。我所做的是將元素包裝在 div 中，然后將這些 div 放入容器 div 中。該容器 div.grid-container將具有display: grid其余的只是配置列和行。
.grid-container {
display: grid;
grid-template-rows: 50% 50% ;
grid-template-columns: 50% 50%;
column-gap: 20px;
width: 80%;
margin: 0 auto;
}
.graph-container{
grid-column: 1 / span 1; /**Configure the column*/
grid-row: 1 /span 1; /**Configure the row*/
}
.graph-container{
grid-column: 1 / span 1;
grid-row: 2 /span 1;
}
.imageContainer{
grid-column: 2 / span 1;
grid-row: 1 /span 2;
}
.graph {
background-color: #aaa;
border: 0.5px solid black;
}
.imga{
width: 100%;
}
.positive,
.negative,
.mixed {
text-align: right;
padding-top: 5px;
padding-bottom: 5px;
color: white;
}
.positive {
width: 34%;
background-color: #1E8449;
}
.negative {
width: 23%;
background-color: #CB4335;
}
.mixed {
width: 43%;
background-color: #E67E22;
}
#tableSentiment {
border-collapse: collapse;
padding: 10px;
width: 100%; /*Adjust the table so it will fit inside its parent container*/
text-align: center;
font-size: 100%;
left: 10%;
}
#tableColour {
width: 15%;
}
<div class="grid-container"> <!--Main container -->
<div class="graph-container"> <!-- Container for your graphs-->
<div class="graph">
<div class="positive">34%</div>
</div>
<div class="graph">
<div class="negative">23%</div>
</div>
<div class="graph">
<div class="mixed">43%</div>
</div>
</div>
<div id="sentimentContainer"> <!--Container for your guide-->
<table id="tableSentiment" border="1">
<tr>
<td id="tableColour" style="background-color: #1E8449"></td>
<td>Positive</td>
</tr>
<tr>
<td id="tableColour" style="background-color: #CB4335"></td>
<td>Negative</td>
</tr>
<tr>
<td id="tableColour" style="background-color: #E67E22"></td>
<td>Mixed</td>
</tr>
</table>
</div>
<div class="imageContainer"> <!--Container for your image-->
<img class="imga" src="https://c.pxhere.com/photos/7d/c2/adorable_animal_blur_bokeh_cat_cat_face_close_up_cute-1492927.jpg!d" />
</div>
</div>
- 1 回答
- 0 關注
- 148 瀏覽
添加回答
舉報
0/150
提交
取消