Question

我想将页面水平分为两部分。在上半部分，我想要一个表格，在下半部分，我想要一个图像。但它不起作用。请帮帮我。

<!DOCTYPE html>
<html>
    <head>
        <title>JN DIAMONDS</title>
    </head>
        <style>    
            #upper {
                height:50%;
            }

            #lower {
                height: 50%;
                background-image: r1.jpg;
            }
        </style>
    <body>
        <div id="upper">

            <form align="center" method="POST" action="insert_rough.php">
                <fieldset>
                    <legend>JN Patel <b>Rough Diamond</b> Information</legend>
                    <br>
                    <input type="text" name="fname" placeholder="Name" required><br><br>
                    <input type="text" name="twait" placeholder="Total Rough Weight"><br><br>
                    <input type="text" name="cprice" placeholder="1 Carat Price"><br><br>
                    <input type="text" name="dprice" placeholder="Dollar Rate"><br><br>
                    <input type="text" name="date" placeholder="Payment Days" required><br><br>
                    <input type="image" src="submit.jpg" alt="Submit" width="90" height="35"><br>
                </fieldset>
        </div>
        <body>
            <div id="lower"></div>
        </body>
            </form>
    </body>
</html>

Answer 1

所以我拿出了额外的身体标签，并在表格下添加了一张图片。这是我认为你想要的工作码。

http://codepen.io/anon/pen/epeWYQ?editors=100

<!DOCTYPE html>
<html>
    <head>
        <title>JN DIAMONDS</title>
    </head>
        <style>    
            #upper {
                height:50%;
            }

            #lower {
                height: 50%;
                background-image: r1.jpg;
            }
        </style>
    <body>
        <div id="upper">

            <form align="center" method="POST" action="insert_rough.php">
                <fieldset>
                    <legend>JN Patel <b>Rough Diamond</b> Information</legend>
                    <br>
                    <input type="text" name="fname" placeholder="Name" required><br><br>
                    <input type="text" name="twait" placeholder="Total Rough Weight"><br><br>
                    <input type="text" name="cprice" placeholder="1 Carat Price"><br><br>
                    <input type="text" name="dprice" placeholder="Dollar Rate"><br><br>
                    <input type="text" name="date" placeholder="Payment Days" required><br><br>
                    <input type="image" src="submit.jpg" alt="Submit" width="90" height="35"><br>
                </fieldset>
        </div>

            <div id="lower"></div>
          <img src="http://i.cdn.turner.com/asfix/repository//8a250ba13f865824013fc9db8b6b0400/thumbnail_8234390180613999969.jpg" alt="" />

            </form>
    </body>
</html>

你需要一个图片标签，这就是为什么如果你将它链接到css使用背景它不起作用：url（./ img / r1.jpg）no-repeat;您需要将img文件夹名称更改为您保留图像的文件夹。

将页面分为两部分

1 个答案: