表列调整大小问题

Question

我在调整表格列大小时遇到问题。当我将条形图和图像幻灯片并排放在单独的 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%;

}

Answer 1

如果我对您想要实现的目标有正确的解释，您可能实际上想要使用网格布局。我所做的是将元素包装在 div 中，然后将这些 div 放入容器 div 中。该容器 div.grid-container将具有display: grid其余的只是配置列和行。.grid-container {&nbsp; display: grid;&nbsp; grid-template-rows: 50% 50% ;&nbsp; grid-template-columns: 50% 50%;&nbsp; column-gap: 20px;&nbsp; width: 80%;&nbsp; margin: 0 auto;}.graph-container{&nbsp; grid-column: 1 / span 1; /**Configure the column*/&nbsp; grid-row: 1 /span 1; /**Configure the row*/}.graph-container{&nbsp; grid-column: 1 / span 1;&nbsp; grid-row: 2 /span 1;}.imageContainer{&nbsp; grid-column: 2 / span 1;&nbsp; grid-row: 1 /span 2;}.graph {&nbsp; background-color: #aaa;&nbsp; border: 0.5px solid black;}.imga{&nbsp;width: 100%;}.positive,.negative,.mixed {&nbsp; text-align: right;&nbsp; padding-top: 5px;&nbsp; padding-bottom: 5px;&nbsp; color: white;}.positive {&nbsp; width: 34%;&nbsp; background-color: #1E8449;}.negative {&nbsp; width: 23%;&nbsp; background-color: #CB4335;}.mixed {&nbsp; width: 43%;&nbsp; background-color: #E67E22;}#tableSentiment {&nbsp; border-collapse: collapse;&nbsp; padding: 10px;&nbsp; width: 100%; /*Adjust the table so it will fit inside its parent container*/&nbsp; text-align: center;&nbsp; font-size: 100%;&nbsp;&nbsp; left: 10%;}#tableColour {&nbsp; width: 15%;}<div class="grid-container"> <!--Main container -->&nbsp; <div class="graph-container"> <!-- Container for your graphs-->&nbsp; &nbsp; <div class="graph">&nbsp; &nbsp; &nbsp; <div class="positive">34%</div>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="graph">&nbsp; &nbsp; &nbsp; <div class="negative">23%</div>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="graph">&nbsp; &nbsp; &nbsp; <div class="mixed">43%</div>&nbsp; &nbsp; </div>&nbsp; </div>&nbsp;&nbsp;&nbsp; &nbsp; <div id="sentimentContainer"> <!--Container for your guide-->&nbsp; &nbsp; <table id="tableSentiment" border="1">&nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; <td id="tableColour" style="background-color: #1E8449"></td>&nbsp; &nbsp; &nbsp; &nbsp; <td>Positive</td>&nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; <td id="tableColour" style="background-color: #CB4335"></td>&nbsp; &nbsp; &nbsp; &nbsp; <td>Negative</td>&nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; <td id="tableColour" style="background-color: #E67E22"></td>&nbsp; &nbsp; &nbsp; &nbsp; <td>Mixed</td>&nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; </table>&nbsp; </div>&nbsp;&nbsp;&nbsp; <div class="imageContainer"> <!--Container for your image-->&nbsp; <img class="imga" src="https://c.pxhere.com/photos/7d/c2/adorable_animal_blur_bokeh_cat_cat_face_close_up_cute-1492927.jpg!d" />&nbsp; </div></div>