HTML / CSS如何将div与4个文本框(包括h1,p和pictrues)对齐?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (187)

如何安排四个文本框,其中包括一个标题,段落和IMG位于左侧:

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

代码如下:

.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>
提问于
用户回答回答于
  <html>
      <style>
        .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;
        position:relative;
        float:left;
    }

    .text-upperright {
        width: 50%;
    }

    .text-upperleft {
        width: 50%;
    }

    .text-bottomleft {
        width: 50%;
    }

    .text-bottomright {
        width: 50%;
    }

    .imageClass{
      float:left;
      width: 50px;
    }
    #cat {
        float: right;
    }

    #world {
        float: left;
    }

    #swim {
        float: right;
    }

    #columns {
        float: left;
    }

    h2 {
    }

    p {
      margin-left:35%;
      text-align:left;
    }
    </style>
    <div class="bottompane">
        <div class="row">
            <div class="features-text">

                <div class="text-upperleft">
                    <img src="cat.svg" alt="Cat Picture" class="imageClass">
                    <h2>Best-in-class Features</h2>
                    <p>Nobody likes this stuff better than us, you can bet your life on that.</p>
                </div>

            </div>
            <div class="features-text">
                <div class="text-upperright">
                    <img src="world.svg" alt="World Map" class="imageClass">
                    <h2>Reliable Service</h2>
                    <p>You can count on us to help you whenever you need it. We're talking round the clock service.</p>
                </div>

            </div>
        </div>
        <div class="row">
            <div class="features-text">
                <div class="text-bottomleft">
                    <img src="swim.svg" alt="Person swimming" class="imageClass">
                    <h2>An Acquired Taste</h2>
                    <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>

            </div>
            <div class="features-text">
                <div class="text-bottomright">
                    <img src="columns.svg" alt="Greek/Roman columns" class="imageClass">
                    <h2>No Limits</h2>
                    <p>There are absolutely no limits. We do not throttle. We do not cap.</p>
                </div>

            </div>
        </div>
    </div>
    </html>

热门问答

怎么关闭域名隐私保护?

推荐
根据 ICANN 《通用顶级域名注册数据临时政策细则(Temporary Specification for gTLD Registration Data)》和欧盟《通用数据保护条例》合规要求,腾讯云域名信息(WHOIS)查询结果中将不再展示域名所有者、所有者联系邮箱等信息。鉴于...... 展开详请

php发送smtp邮件失败,请帮忙看是腾讯云不支持端口25么?

SQL GM热爱数据库的小工匠
推荐
腾讯云默认限制 TCP:25 端口,支持解封,但是有注意事项: 仅支持解封预付费包年包月的云服务器,暂不支持按量付费的云服务器。 每个腾讯云账号仅可解封5个实例。 请确保 TCP 25端口仅用于连接第三方 SMTP 服务器,并从第三方 SMTP 服务器外发邮件。如发现您直接通过云...... 展开详请

设置了云函数环境变量TZ 为 asia/shanghai,云函数端仍是0时区日期,为何不生效?

Mason-Serverless

腾讯 · 产品经理 (已认证)

推荐
设置 TZ=Asia/Shanghai 可以获取到北京时间 image.png image.png image.png ... 展开详请

安卓APP使用免费版加固后,在Android11系统上运行闪退,是什么原因?

hello,目前已经适配了Android R Beta1,预计这周内上线移动应用安全在线版,请留意日志更新

serverless db 如何管理?

Richel码农
推荐
1.支持pg_dump,psql工具进行数据导入和导出。 2.本地CLI,可以使用postgresql的客户端psql,也可以使用dbeavr,navicate,pgadmin等工具访问。 3.支持操作DB ,要自己写逻辑 ... 展开详请

扩展能力之云调用,小程序端出错:[tcb-js-sdk]参数错误:非法的应用标识?

software微软、谷歌、腾讯、阿里、百度……
推荐
您好,appSign必须是小程序的appid,appSecret的两个字段必须是在云开发控制台-安全来源里配置过的。 image.png ... 展开详请

所属标签

扫码关注云+社区

领取腾讯云代金券