Question

我知道这里有很多相似的主题，我研究过很多类似的主题并尝试过我的例子，但我不明白我做错了什么。我不理解如何将一个div放在另一个div下（如果连续有2个甚至3个div）并且重要的是 - 保存div中文本的适应性和橙色layer-div的高度。尝试将{父} div的position:设为absolute并设置display: table（div 1 - display: table-header-group; div 2 - display: table-footer-group）并且没有得到好结果。请帮助解决这个问题。无论如何，感谢收看！

HTML部分：

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <title>Layout 1</title>
        <link rel="stylesheet" type="text/css" href="style.css"/>
    </head><!--end head-->
    <body>
        <div class="content_3">
                    <div class="content_3_layer">
                        <div class="content_3_column_1">
                            <div class="logo_5">
                                <img src="images/person_logo.png" alt="person_logo">
                            </div>
                            <div class="text_right_4">
                                <h3>Donec nec justo eget</h3>
                                <p>" Ede semper est, vitae luctus metus libero eu augue. Morb sipo ipiscing, commodo quis, gravida ... "<a href="#">- Kohn Doe / company name</a></p>
                            </div>
                        </div>
                        <div class="content_3_column_2">
                            <div class="email_block">
                                <h3>Morbi vitae luctus</h3>
                                <form name="email" action="#" method="get">
                                    <input type="email" name="email" placeholder="   enter your email id here ...">
                                    <button><img src="images/subcribe_button.png" alt="Subcribe ->"></button>
                                </form>
                            </div>
                        </div>
                    </div>
        </div>
    </body>
</html>

CSS部分：

.content_3 {
    background-color: rgb(255,255,255);
    width: 100%; /* standard 1920px */
  /* 187 px*/
    padding-top: 30px;
    padding-bottom: 50px;
    float: left;
}
    .content_3_layer {
        background-color: rgb(232,76,61);
        width: 70%;
        display: table;
        border-radius: 8px;
        margin-left: 15%;
        margin-right: 15%;
    }

        .content_3_column_1 {
            width: 30%;
            padding-left: 2%;
            display: table-header-group;
            float: left;    
        }

            .logo_5 {
                float: left;
            } 

                .logo_5 img {
                    padding-top: 60px;
                    width: 60px;
                }

                    .text_right_4 {
                        float: right;
                        width: 80%;
                        padding-top: 11%;
                        padding-right: 5%;  
                    }

                        .text_right_4 h3 {
                                color: rgb(231,231,231);
                        }

                            .text_right_4 p {
                                    color: rgb(231,231,231);

                            }
                                .text_right_4 a {
                                        color: rgb(231,231,231);
                                        font-style: italic;
                                        text-transform: lowercase;
                                }

                                    .text_right_4 a:hover {
                                            color: rgb(32,38,40);
                                    }


.content_3_column_2 {
    width: 40%;
    padding-right: 2%;
    display: table-footer-group;
        float: right;   
}

    .email_block {
        padding-top: 55px;
    }

        .email_block form {
            padding-top: 10px;
        }

            .email_block input {
                width: 222px;
                height: 25px;

                color: rgb(78,82,83,0.4);
                font: 11px 'Helvetica';
                border: 1px solid rgb(248,248,248);
                margin-bottom: 10px;
                border-radius: 30px;
            }

                .email_block button {
                    width: 80px;
                    border: none;

                    margin: 0px;
                    padding: 0px;
                    border-radius: 90px;
                    background-color: rgb(32,38,40);
                }

enter image description here

一个div在另一个+自适应风格之下

0 个答案: