我在調(diào)整表格列大小時(shí)遇到問(wèn)題。當(dāng)我將條形圖和圖像幻燈片并排放在單獨(dú)的 div 中時(shí)，這會(huì)導(dǎo)致表格列縮小。下圖顯示了它的樣子。第一個(gè)表列應(yīng)該類(lèi)似于圖表中顏色的鍵。我嘗試調(diào)整 CSS 中的寬度，但它調(diào)整的是圖形寬度，而不是表格列寬度。CSS 是否有問(wèn)題，或者 HTML 中的 div 導(dǎo)致了問(wèn)題？感謝您的幫助。超文本標(biāo)記語(yǔ)言 <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 回答
飲歌長(zhǎng)嘯
TA貢獻(xiàn)1951條經(jīng)驗(yàn) 獲得超3個(gè)贊
如果我對(duì)您想要實(shí)現(xiàn)的目標(biāo)有正確的解釋?zhuān)赡軐?shí)際上想要使用網(wǎng)格布局。我所做的是將元素包裝在 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 關(guān)注
- 177 瀏覽
添加回答
舉報(bào)
0/150
提交
取消