首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何将div与包括h1、p和pictrue在内的4个文本框对齐

如何将div与包括h1、p和pictrue在内的4个文本框对齐
EN

Stack Overflow用户
提问于 2018-06-04 03:37:25
回答 2查看 144关注 0票数 0

我对HTML和CSS都是新手。目前,我正在尝试如何安排一个带有四个文本框的div,其中包括一个标题、段落和一个位于左侧的img。整个过程应该是这样的:

首先选择一个div的底部窗格,因为它位于页面的底部。给它一个宽度和高度,它将继承到下面的div。

正如您所看到的,这看起来与它的预期相去甚远。现在,我不知道如何从这一步走得更远。我正在努力学习CSS的语法和知识。

有人能帮我做这个吗?代码编写如下:

.bottompane {
    width: 100%; /* defines overall width of bottompane */
    height: 300px; /* defines overall height of bottompane */
    background-color: silver;
    position: relative;
}

.row {
    text-align: center;
}

.features-text {
    width: 50%; /* 50% width of the parent directory bottompane */
    height: 120px;
    display: inline-block;
}

.text-upperright {
    width: 50%;
}

.text-upperleft {
    width: 50%;
}

.text-bottomleft {
    width: 50%;
}

.text-bottomright {
    width: 50%;
}

#cat {
    float: right;
}

#world {
    float: left;
}

#swim {
    float: right;
}

#columns {
    float: left;
}

h1 {
}

p {
}
<div class="bottompane">
            <div class="row">
                <div class="features-text">
                    <div class="text-upperleft">
                        <h1>Best-in-class Features</h1>
                        <p>Nobody likes this stuff better than us, you can bet your life on that.</p>
                    </div>
                    <img src="cat.svg" alt="Cat Picture">
                </div>
                <div class="features-text">
                    <div class="text-upperright">
                        <h1>Reliable Service</h1>
                        <p>You can count on us to help you whenever you need it. We're talking round the clock service.</p>
                    </div>
                    <img src="world.svg" alt="World Map">
                </div>
            </div>
            <div class="row">
                <div class="features-text">
                    <div class="text-bottomleft">
                        <h1>An Acquired Taste</h1>
                        <p>It may take a little while for you to warm up to us but once you do you will never want to switch.</p>
                    </div>
                    <img src="swim.svg" alt="Person swimming">
                </div>
                <div class="features-text">
                    <div class="text-bottomright">
                        <h1>No Limits</h1>
                        <p>There are absolutely no limits. We do not throttle. We do not cap.</p>
                    </div>
                    <img src="columns.svg" alt="Greek/Roman columns">
                </div>
            </div>
        </div>

EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/50670296

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档