为什么一个div影响另一个div？

Question

我不确定为什么＆＃34;元素一＆＃34;没有居中。带有班级名称的div＆＃34; navBar＆＃34;正在影响下面div中的文本。我不确定为什么＆＃34;元素一＆＃34;没有居中。当我删除＆＃34; navBar＆＃34; div是固定的所以我知道是因为这个。此外，当我删除一些属性，如float：right，＆＃34; element one＆＃34;会改变立场，但不会保持中心。

谢谢！

＆＃13;

＆＃13;

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;
        }

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

将clear:both样式添加到flex-item

＆＃13;

＆＃13;

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;
        }

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您没有正确使用flex。请参阅以下代码段以正确实施它。 application.js适用于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;
}

Answer 3

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

你padding: 5px;上的flex-item会在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