登录
当前位置： 首页 > 知识库问答 >
问题：

HTML--左边距

庾鸿飞
2023-03-14

我使用flexbox在桌面窗口屏幕中布局我的index.html，在一行中有两个div元素，在第二行中有一个长div元素，在第三行中有两个div元素，其中一个包含一个列表。我需要第一行和第三行中两个div元素之间的一些行间距。当我尝试在div元素上使用左边缘或右边缘时，div元素会相互折叠。

我试图改变每个div元素的宽度，但它们最终会互相折叠。我还尝试了在内容类上证明内容和对齐内容，但没有任何结果。

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html,
body {
    height: 100%;
}

header {
    background-color: #414C6A;
    background-image: url("../img/img2.jpg");
    background-size: 100%;
    background-position: top left;
    position: relative;
    background-repeat: no-repeat;
    padding: 20%;
    text-align: center;
    color: white;
}

footer {
    background-color: #7481AD;
    color: white;
    text-align: center;
    padding: 14px;
}

.title {
    margin: 0;
}

.unordered_list {
    list-style: none;
}


/* STYLING CONTENT */
.content {
background-color: #554A4E;
color: white;
padding: 1.25em;
}

.div-content,
.div-list {
    padding: 0.75em;
    border-radius: 12px;
    margin-bottom: 1em;
}

.div-content p,
.div-list .unordered_list {
    margin-top: 0.3125em;
    padding: 0 0.625em;
}

.div-content {
    background-color: #25476c;
}

.div-list {
    background-color: #564B75;
}


/* LAYOUT */

body {
    display: flex;
    flex-direction: column;
}

.content {
    flex: 1 0 auto;
    display: flex;
    flex-wrap: wrap;
}

.div-content {
    width: 50%;
}

.grow {
    width: 100%;
}

.div-list {
    flex-grow: 1;
}

footer {
    flex-shrink: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css">
    <title>CSS Basics</title>
    <!--
        Go to this link:
            http://www.cssdrive.com/imagepalette/index.php
    -->
</head>
<body>
    <header>
        <h1 class="title">CSS Basics</h1>
    </header>

    <div class="content">
        <div class="div-content item-1">
            <h2>What is Lorem Ipsum?</h2>
            <p>
                Lorem Ipsum is simply dummy text of the printing and
                typesetting industry. Lorem Ipsum has been the industry's
                standard dummy text ever since the 1500s, when an unknown
                printer took a galley of type and scrambled it to make a
                type specimen book. It has survived not only five centuries,
                but also the leap into electronic typesetting, remaining essentially
                unchanged. It was popularised in the 1960s with the release of
                Letraset sheets containing Lorem Ipsum passages, and more recently
                with desktop publishing software like Aldus PageMaker including
                versions of Lorem Ipsum.
            </p>
        </div>

        <div class="div-content item-2">
            <h2>Diego Salas</h2>
            <p>
                Lorem Ipsum is simply dummy text of the printing and
                typesetting industry. Lorem Ipsum has been the industry's
                standard dummy text ever since the 1500s, when an unknown
                printer took a galley of type and scrambled it to make a
                type specimen book. It has survived not only five centuries,
                but also the leap into electronic typesetting, remaining essentially
                unchanged. It was popularised in the 1960s with the release of
                Letraset sheets containing Lorem Ipsum passages, and more recently
                with desktop publishing software like Aldus PageMaker including
                versions of Lorem Ipsum.
            </p>
        </div>

        <div class="div-content grow">
            <h2>Diego's Favorite Dogs</h2>
            <p>
                There are many variations of passages of Lorem Ipsum available,
                but the majority have suffered alteration in some form, by injected
                humour, or randomised words which don't look even slightly believable.
                If you are going to use a passage of Lorem Ipsum, you need to be sure
                there isn't anything embarrassing hidden in the middle of text. All the
                Lorem Ipsum generators on the Internet tend to repeat predefined chunks
                as necessary, making this the first true generator on the Internet. It
                uses a dictionary of over 200 Latin words, combined with a handful of
                model sentence structures, to generate Lorem Ipsum which looks
                reasonable. The generated Lorem Ipsum is therefore always free
                from repetition, injected humour, or non-characteristic words etc.
            </p>
        </div>

        <div class="div-list">
            <h2>Diego's Favorite Programming Language</h2>
            <ul class="unordered_list">
                <li>Python</li>
                <li>Java</li>
                <li>C/C++</li>
                <li>JavaScript</li>
            </ul>
        </div>
<!--        <img src="img/img1.jpg" alt="Mountain">-->

        <div class="div-content">
            <h2>Why do we use it?</h2>
            <p>
                Lorem Ipsum is simply dummy text of the printing and
                typesetting industry. Lorem Ipsum has been the industry's
                standard dummy text ever since the 1500s, when an unknown
                printer took a galley of type and scrambled it to make a
                type specimen book. It has survived not only five centuries,
                but also the leap into electronic typesetting, remaining essentially
                unchanged. It was popularised in the 1960s with the release of
                Letraset sheets containing Lorem Ipsum passages, and more recently
                with desktop publishing software like Aldus PageMaker including
                versions of Lorem Ipsum.
            </p>
        </div>
    </div>

    <footer>
        <p>CSS Basics &copy; Diego Salas</p>
    </footer>
</body>
</html>

共有3个答案

白修谨
2023-03-14

在这里，您可以更改宽度并根据全宽度应用边距，并在响应模式下更改全宽度的宽度

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html,
body {
    height: 100%;
}

header {
    background-color: #414C6A;
    background-image: url("../img/img2.jpg");
    background-size: 100%;
    background-position: top left;
    position: relative;
    background-repeat: no-repeat;
    padding: 20%;
    text-align: center;
    color: white;
}

footer {
    background-color: #7481AD;
    color: white;
    text-align: center;
    padding: 14px;
}

.title {
    margin: 0;
}

.unordered_list {
    list-style: none;
}


/* STYLING CONTENT */
.content {
background-color: #554A4E;
color: white;
padding: 1.25em;
}

.div-content,
.div-list {
    padding: 0.75em;
    border-radius: 12px;
    margin-bottom: 1em;
}

.div-content p,
.div-list .unordered_list {
    margin-top: 0.3125em;
    padding: 0 0.625em;
}

.div-content {
    background-color: #25476c;
}

.div-list {
    background-color: #564B75;
}


/* LAYOUT */

body {
    display: flex;
    flex-direction: column;
}

.content {
    flex: 1 0 auto;
    display: flex;
    flex-wrap: wrap;
}

.div-content {
    width: 48.5%;
    margin:5px 0.5% 5px 1%;
}

.div-content.rightdiv {
    width: 48.5%;
    margin:5px 1% 5px 0.5%;
}

.grow {
    width: 98%;
    margin:5px 1%;
}

.div-list {
    flex-grow: 1;
    width: 48.5%;
    margin:5px 0.5% 5px 1%;
}

footer {
    flex-shrink: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css">
    <title>CSS Basics</title>
    <!--
        Go to this link:
            http://www.cssdrive.com/imagepalette/index.php
    -->
</head>
<body>
    <header>
        <h1 class="title">CSS Basics</h1>
    </header>

    <div class="content">
        <div class="div-content item-1">
            <h2>What is Lorem Ipsum?</h2>
            <p>
                Lorem Ipsum is simply dummy text of the printing and
                typesetting industry. Lorem Ipsum has been the industry's
                standard dummy text ever since the 1500s, when an unknown
                printer took a galley of type and scrambled it to make a
                type specimen book. It has survived not only five centuries,
                but also the leap into electronic typesetting, remaining essentially
                unchanged. It was popularised in the 1960s with the release of
                Letraset sheets containing Lorem Ipsum passages, and more recently
                with desktop publishing software like Aldus PageMaker including
                versions of Lorem Ipsum.
            </p>
        </div>

        <div class="div-content item-2 rightdiv">
            <h2>Diego Salas</h2>
            <p>
                Lorem Ipsum is simply dummy text of the printing and
                typesetting industry. Lorem Ipsum has been the industry's
                standard dummy text ever since the 1500s, when an unknown
                printer took a galley of type and scrambled it to make a
                type specimen book. It has survived not only five centuries,
                but also the leap into electronic typesetting, remaining essentially
                unchanged. It was popularised in the 1960s with the release of
                Letraset sheets containing Lorem Ipsum passages, and more recently
                with desktop publishing software like Aldus PageMaker including
                versions of Lorem Ipsum.
            </p>
        </div>

        <div class="div-content grow">
            <h2>Diego's Favorite Dogs</h2>
            <p>
                There are many variations of passages of Lorem Ipsum available,
                but the majority have suffered alteration in some form, by injected
                humour, or randomised words which don't look even slightly believable.
                If you are going to use a passage of Lorem Ipsum, you need to be sure
                there isn't anything embarrassing hidden in the middle of text. All the
                Lorem Ipsum generators on the Internet tend to repeat predefined chunks
                as necessary, making this the first true generator on the Internet. It
                uses a dictionary of over 200 Latin words, combined with a handful of
                model sentence structures, to generate Lorem Ipsum which looks
                reasonable. The generated Lorem Ipsum is therefore always free
                from repetition, injected humour, or non-characteristic words etc.
            </p>
        </div>

        <div class="div-list">
            <h2>Diego's Favorite Programming Language</h2>
            <ul class="unordered_list">
                <li>Python</li>
                <li>Java</li>
                <li>C/C++</li>
                <li>JavaScript</li>
            </ul>
        </div>
<!--        <img src="img/img1.jpg" alt="Mountain">-->

        <div class="div-content rightdiv">
            <h2>Why do we use it?</h2>
            <p>
                Lorem Ipsum is simply dummy text of the printing and
                typesetting industry. Lorem Ipsum has been the industry's
                standard dummy text ever since the 1500s, when an unknown
                printer took a galley of type and scrambled it to make a
                type specimen book. It has survived not only five centuries,
                but also the leap into electronic typesetting, remaining essentially
                unchanged. It was popularised in the 1960s with the release of
                Letraset sheets containing Lorem Ipsum passages, and more recently
                with desktop publishing software like Aldus PageMaker including
                versions of Lorem Ipsum.
            </p>
        </div>
    </div>

    <footer>
        <p>CSS Basics &copy; Diego Salas</p>
    </footer>
</body>
</html>
宋晋
2023-03-14

试着把它们放在弹性容器里。您可以调整列的宽度。请参阅下面的代码。希望有帮助。

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html,
body {
    height: 100%;
}

header {
    background-color: #414C6A;
    background-image: url("../img/img2.jpg");
    background-size: 100%;
    background-position: top left;
    position: relative;
    background-repeat: no-repeat;
    padding: 20%;
    text-align: center;
    color: white;
}

footer {
    background-color: #7481AD;
    color: white;
    text-align: center;
    padding: 14px;
}

.title {
    margin: 0;
}

.unordered_list {
    list-style: none;
}

.div-content-container {
  display: flex;
}

.div-content {
  margin: 0 10px;
  flex: 1 0 auto;
}
<header>
  <h1 class="title">CSS Basics</h1>
</header>

<div class="content">
  <div class="div-content-container">
    <div class="div-content item-1">
      <h2>What is Lorem Ipsum?</h2>
      <p>...</p>
    </div>

    <div class="div-content item-2">
      <h2>Diego Salas</h2>
      <p>...</p>
    </div>
  </div>
  <div class="div-content grow">
    <h2>Diego's Favorite Dogs</h2>
    <p>...</p>
  </div>
  <div class="div-content-container">
    <div class="div-content div-list">
      <h2>Diego's Favorite Programming Language</h2>
      <ul class="unordered_list">
        <li>Python</li>
        <li>Java</li>
        <li>C/C++</li>
        <li>JavaScript</li>
      </ul>
    </div>
    <div class="div-content">
      <h2>Why do we use it?</h2>
      <p>...</p>
    </div>
  </div>
</div>

<footer>
  <p>CSS Basics &copy; Diego Salas</p>
</footer>
公沈浪
2023-03-14

通过将我们希望在同一行中的每个项目包装成

这里的重要部分是：

.row {
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: space-around;
  margin: 10px 0;
}

这使得每个行元素的宽度为其父对象的100%，在本例中，它是容器元素。

然后只需在上设置宽度和边距。div content和on。div列表

width: 50%;
margin: 0 10px;

下面的代码片段显示了这一点。

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
}

header {
  background-color: #414C6A;
  background-image: url("../img/img2.jpg");
  background-size: 100%;
  background-position: top left;
  position: relative;
  background-repeat: no-repeat;
  padding: 20%;
  text-align: center;
  color: white;
}

footer {
  background-color: #7481AD;
  color: white;
  text-align: center;
  padding: 14px;
}

.title {
  margin: 0;
}

.unordered_list {
  list-style: none;
}


/* STYLING CONTENT */

.content {
  background-color: #554A4E;
  color: white;
  padding: 1.25em;
}

.div-content,
.div-list {
  padding: 0.75em;
  border-radius: 12px;
  margin-bottom: 1em;
}

.div-content p,
.div-list .unordered_list {
  margin-top: 0.3125em;
  padding: 0 0.625em;
}

.div-content {
  background-color: #25476c;
}

.div-list {
  background-color: #564B75;
  width: 50%;
  margin: 0 10px;
}


/* LAYOUT */

body {
  display: flex;
  flex-direction: column;
}

.content {
  flex: 1 0 auto;
  display: flex;
  flex-wrap: wrap;
}

.row {
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: space-around;
  margin: 10px 0;
}

.div-content {
  width: 50%;
  margin: 0 10px;
}

.grow {
  width: 100%;
}

.div-list {
  flex-grow: 1;
}

footer {
  flex-shrink: 0;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css/style.css">
  <title>CSS Basics</title>
  <!--
        Go to this link:
            http://www.cssdrive.com/imagepalette/index.php
    -->
</head>

<body>
  <header>
    <h1 class="title">CSS Basics</h1>
  </header>

  <div class="content">
    <div class="row">
      <div class="div-content item-1">
        <h2>What is Lorem Ipsum?</h2>
        <p>
          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
          survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
          publishing software like Aldus PageMaker including versions of Lorem Ipsum.
        </p>
      </div>

      <div class="div-content item-2">
        <h2>Diego Salas</h2>
        <p>
          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
          survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
          publishing software like Aldus PageMaker including versions of Lorem Ipsum.
        </p>
      </div>
    </div>
    <div class="row">
      <div class="div-content grow">
        <h2>Diego's Favorite Dogs</h2>
        <p>
          There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum,
          you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a
          dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic
          words etc.
        </p>
      </div>
    </div>
    <div class="row">
      <div class="div-list">
        <h2>Diego's Favorite Programming Language</h2>
        <ul class="unordered_list">
          <li>Python</li>
          <li>Java</li>
          <li>C/C++</li>
          <li>JavaScript</li>
        </ul>
      </div>
      <!--        <img src="img/img1.jpg" alt="Mountain">-->

      <div class="div-content">
        <h2>Why do we use it?</h2>
        <p>
          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
          survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
          publishing software like Aldus PageMaker including versions of Lorem Ipsum.
        </p>
      </div>
    </div>
  </div>

  <footer>
    <p>CSS Basics &copy; Diego Salas</p>
  </footer>
</body>

</html>

 类似资料：
  • Android导航抽屉左边距

    有可能吗？ 更新：是的，使用工具栏小部件我看到边距。但我有另一个问题：这是白色的导航抽屉 但是当我使用 我看到黑色的背面图标 我可以以编程方式将后退按钮设为白色吗？或者仅使用自定义图标？

  • CSS菜单的左边距奇数

    问题内容： 我有一个用于水平菜单的CSS代码： 但它左边有一个空白，我无法计算出该如何去除。 我尝试做margin：0和margin：-10px等…但是不会走。 这是一个jsFiddle：http : //jsfiddle.net/QSEGR/ 问题答案： 其实不是保证金。 网络浏览器在HTML列表元素上应用诸如 （Google Chrome set）。 您可以通过在元素上进行设置来覆盖用户代理样

  • 上边框和左边框相交的像素

    我有一个div，它的左右两侧有一个像素的纯白色边框，顶部有两个像素的纯黑色边框。在这些边界相交的拐角处，像素显示为白色。有可能把它变成黑色吗？ 这是怎么回事？ html： 和css：

  • HTML元素（div）的全高，包括边框，内边距和边距？

    问题内容： 我需要一个div的全高，我目前正在使用 -返回元素的高度，包括边框和填充（如果有），但不包括边距 但是div中的一个嵌套元素具有的，因此我得到了错误的度量。我试图与没有成功。 如何在JavaScript中获取元素（div）的完整高度（边框，边距，边距）？ 如果没有其他办法，我可以使用jQuery。 问题答案： 如果可以使用jQuery： 对于香草javascript，您需要编写更多内容

  • 如何从左字文档给poi表边距

    我正在使用POI创建word文档。我已经创建了一个表和一个标题。我想给表格留左边距，所以我使用了以下代码： 但是这段代码也给标题从左到右提供了200个边距。我只想要桌子。提前感谢。

  • HTML Div边框未显示

    问题内容： 我正在尝试为HTML中的div元素添加边框。下面是我的代码。 由于某些原因，边框不会显示。我在这里看过一个类似的问题，但我不知道为什么边框没有出现。有什么建议吗？ 注意：此代码段是HTML页面的一部分。可根据要求提供其他代码 问题答案： 默认值是。您需要为边框设置不同的值。

相关问答

如何只映射scala中的左边值？zip_始终是左边列表中最长的前端 - vscode左边怎么设置大一点？PHP虽然循环ODD和甚至包装在左边或右边的列只允许类位于类文本的左手边

相关文章

Java-如何在左边填充零的整数？给HTML表格行加上边框，固定宽度div在右边，填充剩余的宽度div在左边易语言取窗口左边的方法实例如何删除HTML标头上方的空格（边距）？

相关阅读

OrientDB删除边OrientDB修改边OrientDB创建边边界值分析CSS边框图片

相关工具

边录音边转码云边视频边下载边播放左右菜单Demohtml

相关文档

HTML 宝典HTML Canvas Deep DiveHTML 基础教程HTML 入门教程HTML 学习笔记
快捷导航： 新手教程 算法原理 架构设计 Java进阶 数据库进阶 大厂专栏 面试经验 编程笔记 编程问答 所有专题 文档资料 工具软件 电子书籍 小牛导航
在线工具： 房贷计算器 个税计算器 Linux命令查询 Json格式化 正则表达式 颜色转换 AES加解密 SHA1加密 MD5加密 毒鸡汤 字数统计 随机密码生成 进制转换 Base64编解码 励志句子
Copyright © 2019-2024 小牛知识库@xnip.cn. All Rights Reserved.