HTML -- margin left和-right不能与flexbox一起使用
HTML -- margin left和-right不能与flexbox一起使用
提问于 2019-08-13 11:08:28
我使用flexbox在桌面窗口屏幕中布局我的index.html，使其在一行中有两个div元素，在第二行有一个长的div元素，在第三行有两个div元素，其中一个包含一个列表。我需要在第一行和第三行的两个div元素之间留出一些间距。当我尝试在div元素上使用左边界或右边界时，div元素会折叠在彼此的顶部。
我尝试更改每个div元素的宽度，但它们最终一个接一个地折叠在一起。我还在content类上尝试了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>
Stack Overflow用户
发布于 2019-08-13 13:25:42
在flexbox中，页边距可能有点烦人。注意我如何将flex容器的宽度设置为1oovw - 1em，然后将边距设置为0.5em和auto。一旦我们在所有元素上添加0.5en的边距，这将在所有元素周围创建一个均匀的边距。还请注意，除非您通过增加同一行上的项目的弹性基础，直到它们不再适合同一行，否则任何东西都不会折叠。
body {
margin: 0;
padding: 0;
}
.flex-container {
display: flex;
flex-wrap: wrap;
/* fix flex container margin values can be adjust for desired margin */
width: calc(100vw - 1em); /* Sets the width of the container 100 view width - 2em */
margin: 0.5em auto; /* centers the container on the page and gives a margin top to keep the margin uniform */
/* note that the width margin value should be double the desired margin */
}
.flex-container .child-flex-element {
font-family: sans-serif;
background: seagreen;
color: white;
margin: 0.5em;
padding: 2em;
}
/* from here you can adjust the individual widths of each element by using flex-basis or max/min-width properties */
/* You can also add media queries to make it responsive to screen sizes */
#item-one {
flex-basis: 100%;
height: calc(16vh - 5em);
}
#item-two {
flex-basis: calc(50% - 5em);
}
#item-three {
flex-basis: calc(50% - 5em);
}
#item-four {
flex-basis: 100%;
}
#item-five {
flex-basis: 100%;
height: calc(16vh - 5em);
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="flex-container">
<div id="item-one" class="child-flex-element">Header</div>
<div id="item-two" class="child-flex-element">
<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 id="item-three" class="child-flex-element">
<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 id="item-four" class="child-flex-element">
<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 id="item-five" class="child-flex-element">Footer</div>
</div>
</body>
</html>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57470643
复制相关文章
相似问题
腾讯云开发者
