【问题标题】：Why one div effecting the other div? [duplicate]为什么一个 div 会影响另一个 div？ [复制]
【发布时间】：2018-11-24 21:09:54
【问题描述】：
我不确定为什么“元素一”没有居中。类名为“navBar”的 div 正在影响下面 div 中的文本。我不确定为什么“元素一”没有居中。当我删除“navBar” div 时，它是固定的，所以我知道这是因为这个。此外，当我删除一些属性，如 float:right 时，“元素一”会改变位置，但不会保持居中。
谢谢！
html,
body {
height: 100%;
background-color: #231C18;
font-family: 'Cabin', sans-serif;
}
body {
margin: 0;
}
.flex-container {
padding: 0;
margin: 0;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
justify-content: center;
}
.navBar {
height: 50px;
line-height: 50px;
}
.bar {
margin: 10px;
color: white;
text-decoration: none;
}
.title {
float: left;
font-size: 40px;
}
.right {
float: right;
}
.balance {
background-color: #1A1411;
border-radius: 5px;
text-align: center;
}
.bottom {
text-decoration: none;
margin: 10px;
color: #F7F7F7;
}
.flex-item {
background-color: #1A1411;
padding: 5px;
width: 90vw;
max-width: 700px;
height: 40px;
margin: 10px;
color: white;
font-weight: bold;
font-size: 2em;
text-align: center;
border-radius: 5px;
}
.ad {
height: 300px;
}
<div class="flex-container">
<div class="row">
<div class="navBar">
<a class="bar title" href="#">title</a>
<a class="bar right" href="#">three</a>
<a class="bar right" href="#">two</a>
<a class="bar right" href="#">one</a>
<a class="bar right balance" href="#">balance</a>
</div>
<div class="flex-item">element one</div>
<div class="flex-item ad">element two</div>
<div>
<a class="bottom" href="#">placeholder</a>
</div>
</div>
</div>
【问题讨论】：
标签：
javascript
html
css
flexbox
【解决方案1】：
2 个简单的错误...
1.
而不是把<div class="flex-item ad>...
把<div class="flex-item_ad>...
仅仅因为有一个带有空格的类可能会破坏 CSS...
完成后将其更改为
.ad { styles blah blah }
致
.flex-item_ad { styles blah blah}
请仔细检查您的 CSS 中是否有 text-align: center; 用于 BOTH 类
2.
你在flex-item 上有padding: 5px;，它会在 div 内创建空间...如果你仍然想要 5px 填充，就这样做 -
<div class="flex-item">
<div class="flex-item_content">
</div>
<div class="flex-item_ad">
...
.flex-item {
background-color: #1A1411;
padding: 0px;
width: 90vw;
max-width: 700px;
height: 40px;
margin: 10px;
color: white;
font-weight: bold;
font-size: 2em;
text-align: center;
border-radius: 5px;
}
.flex-item_content {
padding: 5px;
}
欢迎你：D
【解决方案2】：
您没有正确使用 flex。请参阅下面的 sn-p 以正确实现它。 Flex 适用于 flex 容器的直接子级。而不是它的孙子。
html,
body {
height: 100%;
background-color: #231C18;
font-family: 'Cabin', sans-serif;
}
body {
margin: 0;
}
.flex-container {
padding: 0;
margin: 0;
width: 100%;
}
.row {
display: flex;
justify-content: center;
flex-direction: column;
}
.navBar {
height: 50px;
line-height: 50px;
display: flex;
align-items: center;
}
.bar {
margin: 10px;
color: white;
text-decoration: none;
}
.title {
margin-right: auto;
font-size: 40px;
}
.balance {
background-color: #1A1411;
border-radius: 5px;
text-align: center;
}
.bottom {
text-decoration: none;
margin: 10px;
color: #F7F7F7;
}
.flex-item {
background-color: #1A1411;
padding: 5px;
width: 90vw;
max-width: 700px;
height: 40px;
margin: 10px;
color: white;
font-weight: bold;
font-size: 2em;
text-align: center;
border-radius: 5px;
}
.ad {
height: 300px;
}
<div class="flex-container">
<div class="row">
<div class="navBar">
<a class="bar title" href="#">title</a>
<a class="bar right balance" href="#">balance</a>
<a class="bar right" href="#">three</a>
<a class="bar right" href="#">two</a>
<a class="bar right" href="#">one</a>
</div>
<div>
<div class="flex-item">element one</div>
<div class="flex-item ad">element two</div>
</div>
<div>
<a class="bottom" href="#">placeholder</a>
</div>
</div>
</div>
【解决方案3】：
将clear:both样式添加到flex-item
html,
body {
height: 100%;
background-color: #231C18;
font-family: 'Cabin', sans-serif;
}
body {
margin: 0;
}
.flex-container {
padding: 0;
margin: 0;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
justify-content: center;
}
.navBar {
height: 50px;
line-height: 50px;
}
.bar {
margin: 10px;
color: white;
text-decoration: none;
}
.title {
float: left;
font-size: 40px;
}
.right {
float: right;
}
.balance {
background-color: #1A1411;
border-radius: 5px;
text-align: center;
}
.bottom {
text-decoration: none;
margin: 10px;
color: #F7F7F7;
}
.flex-item {
background-color: #1A1411;
clear: both;
padding: 5px;
width: 90vw;
max-width: 700px;
height: 40px;
margin: 10px;
color: white;
font-weight: bold;
font-size: 2em;
text-align: center;
border-radius: 5px;
}
.ad {
height: 300px;
}
<div class="flex-container">
<div class="row">
<div class="navBar">
<a class="bar title" href="#">title</a>
<a class="bar right" href="#">three</a>
<a class="bar right" href="#">two</a>
<a class="bar right" href="#">one</a>
<a class="bar right balance" href="#">balance</a>
</div>
<div class="flex-item">element one</div>
<div class="flex-item ad">element two</div>
<div>
<a class="bottom" href="#">placeholder</a>
</div>
</div>
</div>