这部分PHP和CSS需要JavaScript吗?或者只使用CSS

do I need JavaScript for this part of PHP and CSS? or is it possible with css alone?

本文关键字：CSS 或者 JavaScript PHP 需要 这部分      更新时间：2023-09-26

嗨，伙计们，所有的css工作为所有的计算，为add, mult, sub,div，但当我显示它的所有，我如何改变css改变它为一个更大的框，点击按钮称为"显示所有"。如果你看到我的CSS代码为我的显示块#答案，它只适合单个数值，但我如何调整CSS，以便它可以改变宽度和高度，当用户计算更大的数字，或显示所有?

这是这里的代码

<html>
    <body>
         <style><?php include "style.css" ?></style>
            <form action="index.php" method="POST">
                <table border="1">
                   <td>
                      <p>insert value one: <input type="text" name="num1"> <br>
                      <p>insert value two: <input type="text" name="num2"> <br>
                   </td>
                   <td>
                       <input type="submit" name="add" value="Addition">
                       <input type="submit" name="sub" value="Subtraction">
                       <input type="submit" name="mult" value="Multiplication">
                       <input type="submit" name="div" value="Division">
                       <input type="submit" name="all" value="Display All">
                   </td>
                 </table>
              </form>
 <div id="answerswers">
   <?php
    if (isset($_POST['num1']) && ($_POST['num2'])){
      $val1 = $_POST['num1'];
      $val2 =   $_POST['num2']; 
      $add = $val1+$val2;
      $sub = $val1-$val2;
      $mult = $val1*$val2;
      $div = $val1/$val2;   
    }
    if (isset($_POST['add'])){
      echo $add;
    }
    if (isset($_POST['sub'])){
      echo $sub;
    }
    if (isset($_POST['mult'])){
      echo $mult;
    }
    if (isset($_POST['div'])){
      echo $div;
    }
   if (isset($_POST['all'])){
      echo $add . "<br>" . $sub . "<br>" . $mult . "<br>" . $div . "<br>";
    }
?>
</div>  
    </body>
</html>

和我的CSS

body{
  background-color:#f0f0f0;
}
table{
  margin:50px auto;
  background-color: tan;
  border: 2px solid black;
}
#answers{
  margin:10px auto;
  width: 100px;
  height:30px;
  background-color: tan;
  text-align:center;
  line-height:30px;
  border: solid black 1px;
}

另一个选择是将#answers设置为display: table-cell，并在其周围创建一个包装器div以显示:table

例如:

CSS

//

#answers{
  margin: 10px auto;
  width: 100px;
  padding: 0 10px;
  display: table-cell;
  background-color: tan;
  text-align: center;
  line-height: 30px;
  border: solid black 1px;
}
.answers-wrapper {
    margin: 0 auto;
    text-align: center;
    display: table;
}

//HTML 

<div class="answerswers-wrapper">
    <div id="answerswers">
        <?php?>
    </div>
</div>
当你的数字变大时，这个选项应该允许tan框扩展。

您可以尝试使用min-width和min-height来代替width(参见下面的注释)和height，使您的框根据其内容展开，但永远不会低于指定的最小值。

这里您可以看到几个仅使用min-height的示例:http://jsfiddle.net/tv598/

请注意，display: block(这是div的默认设置)默认将宽度设置为100%，虽然你可以使用display: inline-block;代替，它会导致你的div显示为内联，你也不能使用自动边距居中

相关文章：