在导航栏中并排对齐 3 个 div

Question

我正在尝试在导航栏中并排对齐 3 个 div。在过去的 5 个小时里，我一直在试图解决这个问题，我知道这是一件非常简单的事情，我无法理解。这就是我现在所处的位置。如果我浮动右对齐 div，标签“加入和支持”就会堆叠在一起。<div id="sticky-nav">    <div class="container">        <div class="box">            <div class="align-left">                <a href="javascript:void(0)" class="active">Home</a> <a                    href="javascript:void(0)">Listings</a>            </div>            <div class="align-center">                <form action="/action_page.php">                    <input type="text" placeholder="Search..">                    <button type="submit">                        <i class="fa fa-search"></i>                    </button>                </form>            </div>            <div class="align-right">                <a href="javascript:void(0)">Join</a> <a                    href="javascript:void(0)">Support</a>            </div>        </div>    </div></div>#sticky-nav {    overflow: hidden;    background-color: #7889D6;    position: fixed;    top: 0;    width: 100%;}#sticky-nav a {    float: left;    display: block;    color: #f2f2f2;    text-align: center;    padding: 14px 16px;    text-decoration: none;    font-size: 17px;    display: block;}#sticky-nav input[type=text] {    padding: 6px;    margin-top: 8px;    font-size: 17px;    border: none;    max-width: 300px;    width: 100%;}#sticky-nav button {    padding: 6px 10px;    padding-top: 1px; margin-top : 8px;    margin-right: 16px;    background: #ddd;    font-size: 17px;    border: none;    cursor: pointer;    margin-top: 8px;}#sticky-nav a:hover {    background-color: #ddd;    color: black;}#sticky-nav a.active {    background-color: #4CAF50;    color: white;}.container {    display: table;    width: 100%;}.box {    display: table-row;}.align-left {    width: 33%;    text-align: justify;    display: table-cell;    padding: 10px;}编辑：这是我想要实现的布局， 

Answer 1

我看到你正在使用display: table来达到这种效果。我强烈建议您先阅读更多内容，然后再继续您的工作或项目。您必须了解的一些布局概念是grid和flex。对于您的情况，我们可以使用弹性盒概念来解决您的问题。

flex基本上是一种可以更轻松地在项目之间分配空间的方法。flex-grow就您而言，您可以通过使用和来获得您想要实现的目标flex-basis。flex-basis定义弹性容器内的项目最初应该有多长/多高。flex-grow定义弹性容器内的项目如何根据容器的剩余空间扩展（增长）宽度/高度。

对于您的情况，我们可以简单地将 Flex 容器的宽度（您的包装 div）设置为 100%。为了在项目之间均匀分配空间，我们可以将所有项目的初始宽度设置为 0。然后，将每个 Flexbox 项目的容器剩余空间（仍然是 100%）平均分配为 1。flex-grow但是，这将使所有项目的宽度相似。要使中心 div 更宽，可以将 设为flex-grow2。这将使左侧 div、中心 div 和右侧 div 的宽度分别为容器剩余空间的 25%、50% 和 25%。我真的建议进一步阅读有关 Flex 的内容，以理解我的意思。在上面的链接中阅读了有关 flex 的内容后，请尝试访问此和此以了解有关flex-basis和 的更多信息flex-grow。

这是一个使用的可行解决方案flex。再次，我建议您阅读更多有关 Flex 的内容，以便您可以更好地使用 Flex。

* {

  box-sizing: border-box;

  margin: 0;

  padding: 0;

  font-family: Helvetica;

}

body,

html {

  width: 100%;

  height: 100%;

}

#wrapper {

  display: flex;

  width: 100%;

}

#wrapper * {

  padding: 30px;

  text-align: center;

  color: white;

}

.left-align,

.right-align {

  flex-basis: 0;

  flex-grow: 1;

}

.center-align {

  flex-basis: 0;

  flex-grow: 2;

}

.left-align {

  background: #121212;

}

.center-align {

  background: #232323;

}

.right-align {

  background: #454545;

}

<div id="wrapper">

  <div class="left-align">Some content</div>

  <div class="center-align">Some content</div>

  <div class="right-align">Some content</div>

</div>

Answer 2

我为您的布局创建了一个简单的示例。您可以使用 flex box ie 来实现它

.box{

        display: flex;

        width:100%;

        justify-content:space-between;

      }

这是链接： https: //codesandbox.io/s/optimistic-euclid-xmv6h

希望它能回答您的问题。