我无法填充一行中两个伸缩项之间的水平间隙

2022-01-28 13:02:09 标签 htmlcssflexbox

我正在设计一个网页,我试图堆叠一个剪贴画图像和描述在一行flex。尽管添加了正当内容,但这两者之间的差距并没有消失。我用了颜色来更好地形象化情况。

错误的部分

        body {
          background-color: rgb(220, 220, 220);
        }
        nav {
          display: inline;
          text-align: right;
        }
        nav > * {
          margin: 0px 20px 0px 0px;
          font-family: serif;
          text-decoration: none;
          color: black;
        }
        img {
          width: 25%;
          height: auto;
          display: inline;
          text-align: left;
          margin: 0px 600px 0px 0px;
        }
        header {
          display: block;
        
          margin: 0px 0px 0px 0px;
          width: 100%;
        }
        div {
          display: block;
          width: 70%;
          margin: 0px 200px 0px 200px;
          text-align: center;
        }
        #email {
          background-color: white;
          border: black solid;
          width: 300px;
          height: 25px;
          margin: 0px 0px 10px 0px;
        }
        #submit {
          width: 200px;
          height: 25px;
          display: block;
          margin: auto;
          border: solid black;
          background-color: yellow;
        }
        #features {
          display: block;
        }
        #clip {
          width: 100px;
          height: 100px;
        }
        section {
          display: flex;
          flex-direction: row;
          margin: 50px 100px 50px 100px;
          background-color: yellow;
        }
        article {
          display: flex;
          flex-direction: column;
          background-color: pink;
         
        }
        article > * {
          margin: 0px 0px 0px 0px;
        }
      <body>
      <header>
        <img src="https://cdn.freecodecamp.org/testable-projects- fcc/images/product-landing-page-logo.png" alt="original trombones">
        <nav>
          <a href="">Features</a>
          <a href="">How it works</a>
          <a href="">Pricing</a>
        </nav>
      </header>
      <div>
        <h1 style="text-align: center;">Hand-crafted, home-made masterpieces</h1>
        <form id="form">
        <label for="email"></label>
        <input type="email" id="email" placeholder="Enter your email" required>
        <button type="submit" form="form" target="_blank"id="submit"><strong>Let's get started!</strong></button></form>
        </div>
      <div2 id="features">
        <section>
          <img id="clip" src="https://shop.digitemb.com/wp-content/uploads/2019/06/V-20793-Elegant-Prince-Crown-Silhouette-Vector-Art.jpg">
          <article>
            <h3>Premium Materials</h3>
            <p>Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</p>
          </article>
        </section>
        <section>
          <img id="clip" src="https://www.clipartkey.com/mpngs/m/85-853916_fast-delivery-icon-png.png">
          <article>
            <h3>Fast Shipping</h3>
            <p>We make sure you recieve your trombone as soon as we have finished making it. We also provide free returns if you are not satisfied.</p>
          </article>
        </section>
        <section>
          <img id="clip" src="https://us.123rf.com/450wm/iulika1/iulika11810/iulika1181000043/126717986-project-management-icon-vector-illustration.jpg?ver=6">
          <article>
            <h3>Quality Assurance</h3>
            <p>For every purchase you make, we will ensure there are no damages or faults and we will check and test the pitch of your instrument.</p>
          </article>
        </section>
      </div2>
      
    </body>

这是完整的代码。我试图得到'section'在'#features'元素的项目接近在一起。

###我能理解的是,你想要显示你的内容在一行后删除差距。

以下是满足您需求的解决方案。我改变了CSS only.Also updated HTML document structure by inclu只有。也更新了HTML document structure文档结构包括head tag and title tag a标记和title tag and 标签和包含在头部标签的样式,这是正确的方式来写HTML page.页面。

完整的代码如下;

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <style type="text/css">
        body {
            background-color: rgb(220, 220, 220);
        }
        nav {
            display: inline;
            text-align: right;
        }
            nav > * {
                margin: 0px 20px 0px 0px;
                font-family: serif;
                text-decoration: none;
                color: black;
            }
        img {
            width: 25%;
            height: auto;
            display: inline;
            text-align: left;
            /*margin: 0px 600px 0px 0px;*/
        }
        header img {
            /*        width: 25%;
        height: auto;
        display: inline;
        text-align: left;*/
            margin: 0px 600px 0px 0px;
        }
        header {
            display: block;
            margin: 0px 0px 0px 0px;
            width: 100%;
        }
        div {
            display: block;
            width: 70%;
            margin: 0px 200px 0px 200px;
            text-align: center;
        }
        #email {
            background-color: white;
            border: black solid;
            width: 300px;
            height: 25px;
            margin: 0px 0px 10px 0px;
        }
        #submit {
            width: 200px;
            height: 25px;
            display: block;
            margin: auto;
            border: solid black;
            background-color: yellow;
            margin-bottom: 50px;
        }
        #features {
            display: flex;
        }
        #clip {
            width: 100px;
            height: 100px;
        }
        section {
            display: flex;
            flex-direction: row;
            /* margin: 50px 100px 50px 100px; */
            background-color: yellow;
            /* margin: 0px 100px;*/
        }
        article {
            display: flex;
            flex-direction: column;
            background-color: pink;
        }
            article > * {
                margin: 0px 0px 0px 0px;
            }
    </style>
    <title>Test</title>
</head>
<body>
    <header>
        <img src="https://cdn.freecodecamp.org/testable-projects- fcc/images/product-landing-page-logo.png" alt="original trombones">
        <nav>
            <a href="">Features</a>
            <a href="">How it works</a>
            <a href="">Pricing</a>
        </nav>
    </header>
    <div>
        <h1 style="text-align: center;">Hand-crafted, home-made masterpieces</h1>
        <form id="form">
            <label for="email"></label>
            <input type="email" id="email" placeholder="Enter your email" required>
            <button type="submit" form="form" target="_blank" id="submit"><strong>Let's get started!</strong></button>
        </form>
    </div>
    <div2 id="features">
        <section>
            <img id="clip" src="https://shop.digitemb.com/wp-content/uploads/2019/06/V-20793-Elegant-Prince-Crown-Silhouette-Vector-Art.jpg">
            <article>
                <h3>Premium Materials</h3>
                <p>Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</p>
            </article>
        </section>
        <section>
            <img id="clip" src="https://www.clipartkey.com/mpngs/m/85-853916_fast-delivery-icon-png.png">
            <article>
                <h3>Fast Shipping</h3>
                <p>We make sure you recieve your trombone as soon as we have finished making it. We also provide free returns if you are not satisfied.</p>
            </article>
        </section>
        <section>
            <img id="clip" src="https://us.123rf.com/450wm/iulika1/iulika11810/iulika1181000043/126717986-project-management-icon-vector-illustration.jpg?ver=6">
            <article>
                <h3>Quality Assurance</h3>
                <p>For every purchase you make, we will ensure there are no damages or faults and we will check and test the pitch of your instrument.</p>
            </article>
        </section>
    </div2>
</body>
</html>

Note: Also if you want to display your content in multiple lines i.e single in one row, then just make following changes in my modified/updated code;

#features {
    display: block;
}

从章节和文章中移除背景颜色。也就是黄色和粉色。希望这能解决你的问题。

# # #试试这个

section 
{
  display: flex;
  flex-direction: row;
  margin: auto;
  background-color: yellow;
  
}
article 
{
  display: flex;
  flex-direction: column;
  background-color: pink;
}

###我重写了你的代码,考虑以下几点:

片段

您可以完全控制您的填充和边距。flex-container >img的文章

html {background-color: rgb(220, 220, 220)}
#features{width:100%;text-align:center}
#clip{height:200px;width:200px}
.flex-container {
  margin:auto;
  max-width:700px;
  display: flex;
}
.flex-container > img, article {
  background-color: #f1f1f1;
  margin: 10px 5px 0 0;
  padding: 20px;
  font-size: 15px;
}
<div id="features">
        
        <section class="flex-container">
          <img id="clip" src="https://shop.digitemb.com/wp-content/uploads/2019/06/V-20793-Elegant-Prince-Crown-Silhouette-Vector-Art.jpg">
          <article>
            <h3>Premium Materials</h3>
            <p>Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</p>
          </article>
        </section>
        
        <section class="flex-container">
          <img id="clip" src="https://www.clipartkey.com/mpngs/m/85-853916_fast-delivery-icon-png.png">
          <article>
            <h3>Fast Shipping</h3>
            <p>We make sure you recieve your trombone as soon as we have finished making it. We also provide free returns if you are not satisfied.</p>
          </article>
        </section>
        
        <section class="flex-container">
          <img id="clip" src="https://us.123rf.com/450wm/iulika1/iulika11810/iulika1181000043/126717986-project-management-icon-vector-illustration.jpg?ver=6">
          <article >
            <h3>Quality Assurance</h3>
            <p>For every purchase you make, we will ensure there are no damages or faults and we will check and test the pitch of your instrument.</p>
          </article>
        </section>
        
</div>

注:如果你想了解更多关于flexx,我建议这个页面

阅读全文

▼ 版权说明

相关文章也很精彩
推荐内容
更多标签
相关热门
javascript -在redux工具箱状态中更改一个数组的特定元素
不能使用MySQL ODBC 3.51.30驱动程序创建新的文件数据源来连接MySQL,但是使用connector v8.0.23可以
我应该在代码中返回什么?作为颤振开发人员的初学者,在我的代码中给我这样的错误
在使用php将子文件夹中的图像转换为图片库的缩略图时遇到麻烦
在部署lambda函数时,amazon web服务——新的403错误,我如何解决这个问题?我正在尝试从github部署我的lambda函数。自从上次工作以来,我没有更改证书或类似的东西。我甚至没有登录AWS。但当我尝试部署我的lambda函数时,我得到了一个403错误。为什么会发生这种情况?我甚至不能从AWS的控制台编辑和保存它给我403。为什么AWS给自己一个403 ?这是我的博士学位:我甚至不能通过aws控制台上传zip:我不能创建一个新的lambda函数,要么我得到一个无法解释的403错误。我完全被
如何在Strapi中创建自定义上传API ?在我的用户模型中,我添加了一些字段:点化身封面等……《阿凡达》和《封面》是媒体领域。当用户上传一个头像或一个封面图像时,我想检查他是否已经上传了这样的文件,如果没有-添加X点到他的计数。虽然我很容易在客户端管理它,但我更喜欢与服务器(Strapi)的点相关的所有东西。所以我尝试创建一个定制API来上传头像或封面。首先,我在用户/配置/路由上定义了一条新路由。然后在用户/控制器/用户。我创建了处理程序:然后我已经有了用户/服务/用户的updateUser服务。js
如何测试RabbitMQ生产者使用摩卡和sinon?
如何获取节点子路径导入intellisense工作
单元测试容器组件
使用自定义公式MongoDB聚合将子数组转换为对象
全站排行
随便看看

错说 cuoshuo.com —— 程序员的报错记录

部分内容根据CC版权协议转载;网站内容仅供参考,生产环境使用务必查阅官方文档

辽ICP备19011660号-5

×

扫码关注公众号:职场神器
发送: 1
获取永久解锁本站全部文章的验证码