Question

抱歉新手问题，但我几乎没有开始使用CSS。我正在尝试制作一个容器，其中包含一个图像，然后是一些文本，然后是一个按钮。我希望所有内容都完美地包含在容器中，我将在页面中有许多这样的容器。下面是我的代码，但我无法工作。以下是一个片段：

<body>
<link rel="stylesheet" href="shop.css">
<div id="container">

    <div class="image">
        <div class="pic">
            <img src="images/itiem.jpg">
        </div>
        <div class="label">
            <p> Item 1 </p>
            <form method="post" action="">
                <input type="submit" value="add">
            </form>
        </div>
    </div>

    <div class="image">
        <div class="pic">
            <img src="images/itiem.jpg">
        </div>
        <div class="label">
            <p> Item 1 </p>
            <form method="post" action="">
                <input type="submit" value="add">
            </form>
        </div>
    </div>

</html>

css part：

body {
margin: 0px;
padding: 0px;
}

#container {
position: relative;
width: 100%;
height: 100%;
}

.image {
position: relative;
float: left;
margin: 4px;
padding: 10px;
width: 15%;
height: 30%;
background-color: gray;
padding: 0px;
margin: 10px;
}

.pic {
position: absolute;
top: 0;
width: 100%;
height: 80%;
background-color: red;
}

.label {
position: absolute;
top: 80%;
width: 100%;
height: 20%;
background-color: green;
padding: 0px;
}

p {
width: 100%;
height: 50%;
color: white;
background: pink;
}

按钮溢出div

0 个答案: