文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
首页
学习
活动
专区
圈层
工具
MCP广场
返回腾讯云官网
社区首页 >问答首页 >HTML -- margin left和-right不能与flexbox一起使用

问HTML -- margin left和-right不能与flexbox一起使用
EN

Stack Overflow用户
提问于 2019-08-13 11:08:28
回答 4查看 3K关注 0票数 1

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

我尝试更改每个div元素的宽度，但它们最终一个接一个地折叠在一起。我还在content类上尝试了justify-content和align-content，但没有任何反应。

​

代码语言：javascript
复制
* {
    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;
}
代码语言：javascript
复制
<!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>

​

html
css
flexbox
margins
EN

回答 4

Stack Overflow用户

回答已采纳

发布于 2019-08-13 12:48:43

通过将我们想要在同一行中的每个项目包装在一个<div class="row"></div>中，您就可以使它成为每个元素占据该行宽度的一半。这也将考虑到项目的边际。

这里的重要部分是：

代码语言：javascript
复制
.row {
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: space-around;
  margin: 10px 0;
}

这使得每个row元素的宽度都是其父对象的100%，在本例中是container元素。

然后，您只需在.div-content和.div-list上设置宽度和边距

代码语言：javascript
复制
width: 50%;
margin: 0 10px;

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

​

代码语言：javascript
复制
* {
  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;
}
代码语言：javascript
复制
<!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>

​

票数 2
EN

Stack Overflow用户

发布于 2019-08-13 11:46:25

尝试将它们放在flex容器中。您可以调整列的宽度。请参阅下面的代码。希望能有所帮助。

​

代码语言：javascript
复制
* {
    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;
}
代码语言：javascript
复制
<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>

​

票数 0
EN

Stack Overflow用户

发布于 2019-08-13 12:51:21

在这里，您可以更改宽度并基于全宽应用页边距，在响应模式中可以将宽度更改为全宽

​

代码语言：javascript
复制
* {
    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;
}
代码语言：javascript
复制
<!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>

​

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

https://stackoverflow.com/questions/57470643

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

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