Question

我有一个外部div，它是一个弹性框。在其中，将有三个元素作为内联块：左侧和右侧两个广告，以及两者之间的内容。我希望广告左右对齐，然后在中间处理我的内容，好像广告是页面的边距（我希望这很清楚）。我必须使用大量的 空格，但有没有办法直接将两个广告放在弹性框的两边？我尝试使用position:right和float:right;属性，但这些属性无效。

这是我的代码：

<!---==OUTER DIV==-->
<div id="content-flex" style="display:flex;">


    <!--====LEFT SIDE AD====-->

    <div style="display:inline-block; position:left;">
        <span style="color:white;">Advertisement</span><br/>
        <a href="http://www.bmw.com.au" target="_blank">
            <img src="https://media.giphy.com/media/zuTk53kSNOJJC/giphy.gif" />
        </a><br/>
    </div>

    <!--HERE I HAVE TO USE A LOT OF &nbsp;-->



    <!--====MIDDLE : CONTEN====T-->

    <div style="display:inline-block;">

        <p>Loreum Ipsum...</p>

    </div>

    <!--HERE I HAVE TO USE A LOT OF &nbsp;-->



    <!--====RIGHT SIDE AD====-->

    <div style="display:inline-block; position:right;">
        <span style="color:white;">Advertisement</span><br/>
        <a href="http://www.bmw.com.au" target="_blank">
            <img src="https://media.giphy.com/media/zuTk53kSNOJJC/giphy.gif" />
        </a>

    </div>

</div>

这就是页面现在的样子：

Answer 1

如果您只是在中间div上设置flex: 1，则会占用所有可用空间并将右侧广告推向右侧。此外，一旦在父元素display: flex上设置float，属性将不适用于子元素。

#content-flex > div:nth-child(2) {
  flex: 1;
}

<div id="content-flex" style="display:flex;">

  <div>
    <span style="color:white;">Advertisement</span>
    <br/>
    <a href="http://www.bmw.com.au" target="_blank">
      <img src="https://media.giphy.com/media/zuTk53kSNOJJC/giphy.gif" />
    </a>
    <br/>
  </div>

  <div>
    <p>Loreum Ipsum...</p>
  </div>

  <div >
    <span style="color:white;">Advertisement</span>
    <br/>
    <a href="http://www.bmw.com.au" target="_blank">
      <img src="https://media.giphy.com/media/zuTk53kSNOJJC/giphy.gif" />
    </a>
  </div>

</div>

Answer 2

将以下样式添加到外部div。

justify-content: space-between;

或

justify-content: space-around;

Look here for more alignment options for flex

Answer 3

这是使用弹性盒模型管理它的方法：

＆＃13;

#content-flex,
#AdLft,
#AdRgt{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  flex-direction: row;
}
.Middle{
  width:100%;
}

＆＃13;

<div id="content-flex">

  <div id="AdLft">
    <a href="http://www.bmw.com.au" target="_blank">
      <img src="https://media.giphy.com/media/zuTk53kSNOJJC/giphy.gif" />
    </a>
  </div>

  <div class="Middle">
    <p>Loreum Ipsum...</p>
  </div>

  <div id="AdRgt">
    <a href="http://www.bmw.com.au" target="_blank">
      <img src="https://media.giphy.com/media/zuTk53kSNOJJC/giphy.gif" />
    </a>
  </div>

</div>

＆＃13;

如何在柔性盒内对齐内联块元素？

3 个答案: