堆栈内存溢出
  繁体   English   中英

如何在div框内彼此堆叠div？

[英]How do I stack divs on top of each other in a form box?

 原文  2013-12-02 15:00:06  3   3    html/ css

问题描述

因此，我不太清楚为什么我的div重叠了我希望它们定位的方式。 我正在尝试制作一个包含标题的表格，该标题在div的两侧溢出，但无济于事。 我已经附上了一张图片，以便您可以直观地看到我要完成的工作。 只是没有正确地出来。

我想做的

使用以下HTML创建了一个表单框： 

<div class="container">
                <div class="row">


                    <div class="span4 featured">    
                        <h2 class="feature-title">It's Never Been Easier!
                            <p>Create Your Free Profile Now!</p></h2>
                        <form action="send-mail.php" method="post" id="contact-form">

                            <input type="text" value="Full Name" name="name" class="required">
                            <input type="text" value="Email Address" name="email" class="required email">
                            <input type="text" value="Username" name="username">
                            <input type="text" value="Password" name="password">
                            <input type="submit" name="subscribe" value="JOIN FREE">
                        </form>
                    </div>

和CSS： 

.featured form input[type="submit"] {
    background: #3097be;
    color: #ffffff;
    width: 100%;
    margin-bottom: 0px;
    font-size: 20px;
    font-family: 'Open Sans', sans-serif;
    -webkit-transition: background linear .2s;
    -moz-transition: background linear .2s;
    -o-transition: background linear .2s;
    padding-left: 20intro .container {
    padding-top: 0px;
}

.featured {
    min-height: 500px;
    float: right;
    margin-top: -900px;
    margin-bottom: 30px;
}

.featured h2 {
        font-size: 24px;
        overflow: visible;
    background: url(http://i.imgur.com/oP8bXR7.png) center no-repeat;
    -webkit-border-radius: 0px; 
    -moz-border-radius: 0px; 
    -o-border-radius: 0px; 
    border-radius: 0px;
    padding: 20px 0px 5px 30px;
    color: black;
    margin-bottom: 0px;
}

.featured form {
    background: url(http://i.imgur.com/swcwFW6.png) center no-repeat;
    -webkit-border-radius: 0px; 
    -moz-border-radius: 0px; 
    -o-border-radius: 0px; 
    border-radius: 0px;
    padding: 20px 30px 30px 30px;
    margin-top: -20px;
}

.featured p {
    color: blue;
    text-align: center;

}

.featured form input{
    width: 225px;
    -webkit-border-radius: 0px; 
    -moz-border-radius: 0px; 
    -o-border-radius: 0px; 
    border-radius: 0px;
    border: none;
    padding: 3px 9px 3px 9px;
    color: #bebebe;
    box-shadow: none;
    font-family: 'Lato', sans-serif;
    margin-bottom: 20px;
    -webkit-transition: background linear .2s,color linear .2s;
    -moz-transition: background linear .2s,color linear .2s;
    -o-transition: background linear .2s,color linear .2s;
}

.featured form textarea {
    width: 200px;
    height: 70px;
    background: #474747;
    -webkit-border-radius: 0px; 
    -moz-border-radius: 0px; 
    -o-border-radius: 0px; 
    border-radius: 0px;
    border: none;
    padding: 12px 20px 12px 20px;
    color: #bebebe;
    box-shadow: none;
    font-family: 'Lato', sans-serif;
    margin-bottom: 30px;
    -webkit-transition: background linear .2s,color linear .2s;
    -moz-transition: background linear .2s,color linear .2s;
    -o-transition: background linear .2s,color linear .2s;
}

3 个解决方案

解决方案1
 4 已采纳  2013-12-02 15:13:23

我认为您的html标记不会有效地为您提供所需的视觉外观。 还要查找语义HTML，您不应该在标题（h2）标记内包含一个段落（p）标记-正如它们的名称所暗示的，它们的用途完全不同。

您可以这样尝试HTML： 

<div class="span4 featured">
    <div class="feature-title">    
    <h2>It's Never Been Easier!</h2>
    <p>Create Your Free Profile Now!</p>
    </div>
    <form action="send-mail.php" method="post" id="contact-form"></form>
</div>

然后可以将负边距应用于左侧和右侧： 

.feature-title {margin: 0 -20px}

当然，有很多方法可以给猫咪剥皮，并且有六种方法可以实现想要做的事情

解决方案2
 1  2013-12-02 15:15:48

一些通用的格式设置和一些不能错过的标签，最大的问题似乎是由于某种原因您在.featured上的900px负边距。 它将整个内容移到页面顶部之外。 当我第一次将您的代码弹出到Dreamweaver中时，我什至看不到表格。 否则，为了简单地将输入字段堆叠起来，我建议将它们设置为display: block; 他们应该各有各的线。 一个简单的margin: 0 auto; 或者在您的情况下， margin 0 auto 20px; （只要将左右边距设置为“自动”即可）将其居中。

我的测试文档的完整内容如下： 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
    .featured form input[type="submit"] {
        background: #3097be;
        color: #ffffff;
        width: 100%;
        margin-bottom: 0px;
        font-size: 20px;
        font-family: 'Open Sans', sans-serif;
        -webkit-transition: background linear .2s;
        -moz-transition: background linear .2s;
        -o-transition: background linear .2s;
        padding-left: 20intro;
    }
    .container {
        padding-top: 0px;
    }

    .featured {
        min-height: 500px;
        float: right;
        margin-bottom: 30px;
    }

    .featured h2 {
        font-size: 24px;
        overflow: visible;
        background: url(http://i.imgur.com/oP8bXR7.png) center no-repeat;
        -webkit-border-radius: 0px; 
        -moz-border-radius: 0px; 
        -o-border-radius: 0px; 
        border-radius: 0px;
        padding: 20px 0px 5px 30px;
        color: black;
        margin-bottom: 0px;
    }

    .featured form {
        background: url(http://i.imgur.com/swcwFW6.png) center no-repeat;
        -webkit-border-radius: 0px; 
        -moz-border-radius: 0px; 
        -o-border-radius: 0px; 
        border-radius: 0px;
        padding: 20px 30px 30px 30px;
        margin-top: -20px;
    }

    .featured p {
        color: blue;
        text-align: center;

    }

    .featured form input{
        display: block;
        width: 225px;
        -webkit-border-radius: 0px; 
        -moz-border-radius: 0px; 
        -o-border-radius: 0px; 
        border-radius: 0px;
        border: none;
        padding: 3px 9px 3px 9px;
        color: #bebebe;
        box-shadow: none;
        font-family: 'Lato', sans-serif;
        margin: 0 auto 20px;
        -webkit-transition: background linear .2s,color linear .2s;
        -moz-transition: background linear .2s,color linear .2s;
        -o-transition: background linear .2s,color linear .2s;
    }

    .featured form textarea {
        width: 200px;
        height: 70px;
        background: #474747;
        -webkit-border-radius: 0px; 
        -moz-border-radius: 0px; 
        -o-border-radius: 0px; 
        border-radius: 0px;
        border: none;
        padding: 12px 20px 12px 20px;
        color: #bebebe;
        box-shadow: none;
        font-family: 'Lato', sans-serif;
        margin: 0 auto 30px;
        -webkit-transition: background linear .2s,color linear .2s;
        -moz-transition: background linear .2s,color linear .2s;
        -o-transition: background linear .2s,color linear .2s;
    }
</style>
</head>

<body>
<div class="container">
    <div class="row">
        <div class="span4 featured">    
            <h2 class="feature-title">It's Never Been Easier!</h2>
            <p>Create Your Free Profile Now!</p>
            <form action="send-mail.php" method="post" id="contact-form">

                <input type="text" value="Full Name" name="name" class="required">
                <input type="text" value="Email Address" name="email" class="required email">
                <input type="text" value="Username" name="username">
                <input type="text" value="Password" name="password">
                <input type="submit" name="subscribe" value="JOIN FREE">
            </form>
        </div>
    </div>
</div>
</body>
</html>

编辑：我什至没有注意到h2中的p标签。 我只是专注于CSS。

解决方案3
 0  2013-12-02 15:26:58

试试这样的： 演示

HTML： 

<div class="container">
    <div class="header">
        <div>Its never...</div>
        <div>Create...</div>
    </div>
    <div class="form">
        <div class="input-item">
            <input name="input1" type="text" />
        </div>
        <div class="input-item">
            <input name="input2" type="text" />
        </div>
        <div class="input-item">
            <input name="input3" type="text" />
        </div>
        <div class="join">
            Join!
        </div>
    </div>
</div>

CSS： 

.container {
    margin: 30px;
    background: gray;
    position: relative;
    width: 200px;
    padding-top: 60px;
}

.header {
    border: 1px solid black;
    background: white;
    position: absolute;
    top: 10px;
    left: -10px;
    width: 220px;
}

.form {
    background: darkgray;    
}

.input-item {
    margin: 5px;
}

.join {
    background: lightblue;
}

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何将这些div彼此堆叠？ 如何在页面中心将这些div堆叠在一起？ 如何将两个水平div堆叠在一起以便移动？ 如何将Divs叠加在一起 Divs 相互堆叠 为什么2个.col div彼此堆叠，以及如何在boostrap的相对侧重复此重复？ 如何使用Float而不是绝对定位将多个Div堆叠在一起？ CSS堆栈div彼此叠置 如何创建 2 个响应式列 div，以不同的屏幕尺寸堆叠在每个列的顶部？ 如何将 div 放在其他 div 之上？
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM