在Web开发挑战中需要帮助(HTML和CSS)

2ic8powd 于 2023-01-10 发布在其他

关注(0)|答案(2)|浏览(77)

我是一个学习网络开发的新手，我正在经历着试图提高的山山水谷。到目前为止，我只知道HTML和CSS，所以这个问题应该很容易回答。我在一个网站上，做网络挑战来帮助你提高，这是它应该看起来像：The goal
然而，这是我目前拥有的：（我对div进行了颜色编码，这样你就可以更好地看到发生了什么。蓝色是第一个div，用于保存文本，绿色是第二个div，用于保存图像，而"binding-div"是紫色的，应该将两个div放在里面）The Current State

- 我的问题是图像没有进入"第二格"，我不知道为什么。**

body {
    background-color: black;
}

.container-div {
    background-color: rgb(133, 63, 208);
}

.binding-div {
    margin: 130px 205px;
    background-color: rgb(27, 134, 88);
    width: 1080px;
    height: 446px;
}

.first-div {
    display: inline-block;
    background-color: rgb(29, 26, 232);
    width: 540px;
    height: 446px;
    text-align: center;
}

.second-div {
    display: inline-block;
}

h1 {
    color: white;
    width: 60%;
    margin: 60px auto 20px auto;
}

p {
    color: white;
    width: 60%;
    margin: 0 auto;
}

.bottom-p {
    margin: 140px auto 40px auto;
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Stat Card</title>
        <link rel="stylesheet" href="css/styles.css" />
    </head>
    <body>
        <div class="container-div">
            <div class="binding-div">
                <div class="first-div">
                    <h1>Get insights that help your business grow.</h1>
                    <p>
                        Discover the benefits of data analytics and make better decisions regarding
                        revenue, customer experience, and overall efficiency.
                    </p>
                    <p class="bottom-p">Challenge by Frontend Mentor. Coded by (insert name)</p>
                </div>

                <div class="second-div">
                    <img src="Images\image-header-desktop.jpg" />
                </div>
            </div>
        </div>
    </body>
</html>

这几乎就像图像不能识别div。任何帮助都是感激的。

css

来源：https://stackoverflow.com/questions/75027065/needing-help-on-a-web-dev-challenge-html-and-css

2条答案

按热度按时间

5f0d552i1#

你不需要改变内嵌块中的div. div就是一个块.
要使两个div位于同一行，最简单的方法是使用display：在div的父容器中，所以在binding-div中。

赞(0）回复(0）举报 2023-01-10

zpgglvta2#

如果你想在同一行中显示两个div，只需使用以下命令：

.binding-div {
    margin: auto;
    background-color: rgb(27, 134, 88);
    width: 1080px;
    height: 446px;
}

.first-div {
    display: inline-block;
    background-color: rgb(29, 26, 232);
    width: 50%;
    height: 446px;
    text-align: center;
    float: left;
}

.second-div {
    display: inline-block;
    float: left;
}

.binding-div:after{
    content: "";
    clear:both;
    display: table;
}

我希望它能起作用。
这是完整的代码，我做了一些简单的修改，

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Stat Card</title>
        <link rel="stylesheet" href="css/styles.css" />
    </head>
    <body>
        <div class="container-div">
            <div class="binding-div">
                <div class="first-div">
                    <h1>Get insights that help your business grow.</h1>
                    <p>
                        Discover the benefits of data analytics and make better decisions regarding
                        revenue, customer experience, and overall efficiency.
                    </p>
                    <p class="bottom-p">Challenge by Frontend Mentor. Coded by (insert name)</p>
                </div>

                <div class="second-div">
                    <img src="https://images.pexels.com/photos/38568/apple-imac-ipad-workplace-38568.jpeg?auto=compress&cs=tinysrgb&w=1260" />
                </div>
            </div>
        </div>
    </body>
</html>

更新的CSS：

body {
    background-color: black;
}
.container-div {
    background-color: rgb(133, 63, 208);
}
.binding-div {
    margin: 130px auto;
    background-color: rgb(27, 134, 88);
    width:100%;
    max-width: 1080px;
    height: 446px;
}
.first-div {
    display: inline-block;
    background-color: rgb(29, 26, 232);
    width:50%;
    height: 446px;
    text-align: center;
    float:left;
    
}
.second-div {
    display: inline-block;
    float:left;
    width:50%;
}
.binding-div:after{
display:table;
clear:both;
content:";
}
.second-div img{
width:100%;
}
h1 {
    color: white;
    width: 60%;
    margin: 60px auto 20px auto;
}
p {
    color: white;
    width: 60%;
    margin: 0 auto;
}
.bottom-p {
    margin: 140px auto 40px auto;
}

您的图像大小：100%;您的宽度为最大宽度

赞(0）回复(0）举报 2023-01-10

我来回答

在Web开发挑战中需要帮助(HTML和CSS)

2条答案

相关问题

热门标签

最新问答