【发布时间】：2019-12-19 14:11:27
【问题描述】：
我使用 flexbox 在桌面窗口屏幕中布局我的 index.html，以便在一行中有两个 div 元素，在第二行中有一个长 div 元素，以及两个 div 元素，其中一个包含一个列表，在第三排。我需要在第一行和第三行的两个 div 元素之间留一些间距。当我尝试在 div 元素上使用 margin-left 或 margin-right 时，div 元素会相互重叠。
我尝试更改每个 div 元素的宽度，但它们最终会相互重叠。我还在内容类上尝试了 justify-content 和 align-content，但没有任何反应。
* {
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 © Diego Salas</p>
</footer>
</body>
</html>【问题讨论】：
-
最好将您的代码添加为 sn-p，这样我们就可以看到您描述的问题。