Question

我正在建立一个网站，并收到了一个带有该设计的PSD文件，但我正在一个特定的部分挣扎。这就是设计的外观 -

这就是我在的地方 -

我确信这对于经验丰富的前端开发人员来说非常明显，但我一直在使用花车和显示器并且正在挣扎。这是我用过的代码 -

HTML

 <section id="home">

        <a href="agency.html">Are you an agency?</a>
        <a href="business.html">Or a business?</a>
        <div class="container showreel">
            <div class="seemore">
                <i class="fa fa-angle-down fa-3x" aria-hidden="true"></i>
                <p>SEE MORE</p>
            </div>
            <div class="seeour">
                <p>SEE OUR SHOWREEL</p>
                <i class="fa fa-play-circle-o fa-3x" aria-hidden="true"></i>
            </div>
        </div>
    </section>

CSS

section#home {

    height: 480px;
    max-width: 100%;
    background: url(../images/homepagemain.jpg) center center no-repeat;
    background-size: 960px;
    background-position: center;
    overflow: hidden;
    margin-top: 75px;
    position: relative;
}

.showreel {
    height: 50px;
    width: 960px;
    background-color: black;
    position: absolute;
    bottom: 0;
}

.showreel p  {
    display: inline-block;
    font-size: 15px;
    font-weight: normal;


    color: #ffffff;
}

.showreel i {
    display: inline-block;
    margin-right: 30px;
    color: #ffffff;


}

.seemore {
    float: left;
}

.seeour {
    float: right;
}

图标与设计中的图标完全相同，但我可以稍后更改/修改。更重要的是我需要做出正确的定位。任何帮助，赞赏。

更新 - 现在就是这样。

Answer 1

您可以制作父母和左/右部分flex并使用align-items: center将它们垂直居中，然后在父级上使用justify-content: space-between将元素分隔到远边。然后重新排列左侧元素中的i和p，并将唯一的margin-left和margin-right应用于图标，以将它们与文本分开。

＆＃13;

section#home {
    height: 480px;
    max-width: 100%;
    background: url(../images/homepagemain.jpg) center center no-repeat;
    background-size: 960px;
    background-position: center;
    overflow: hidden;
    margin-top: 75px;
    position: relative;
}

.showreel {
  height: 50px;
  width: 960px;
  background-color: black;
  position: absolute;
  bottom: 0;
  padding: 0 30px;
  justify-content: space-between;
}

.showreel, .showreel > div {
  display: flex;
  align-items: center;
}

.showreel p {
  font-size: 15px;
  font-weight: normal;
  margin: 0;
  color: #ffffff;
}

.showreel i {
  color: #ffffff;
}

.seemore i {
  margin-right: 30px;
}

.seeour i {
  margin-left: 30px;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<section id="home">
        <a href="agency.html">Are you an agency?</a>
        <a href="business.html">Or a business?</a>
        <div class="container showreel">
            <div class="seemore">
                <i class="fa fa-angle-down fa-3x" aria-hidden="true"></i>
                <p>SEE MORE</p>
            </div>
            <div class="seeour">
                <p>SEE OUR SHOWREEL</p>
                <i class="fa fa-play-circle-o fa-3x" aria-hidden="true"></i>
            </div>
        </div>
    </section>

＆＃13;

Answer 2

https://codepen.io/toastEater/pen/rwYRMG

HTML

<div class="container">
  <div class="bottom-bar">
    <div class="showreel">
            <div class="seemore">
                <p>SEE MORE</p>
                <i class="fa fa-angle-down fa-3x" aria-hidden="true"></i>
            </div>
            <div class="seeour">    
            <p>SEE OUR SHOWREEL</p>
            <i class="fa fa-play-circle-o fa-3x" aria-hidden="true"></i>
            </div>
        </div>
  </div>

</div>

CSS

 .container{
      width: 100%;
      height: 420px;
      background: url('http://i.imgur.com/5tj6S7Or.jpg') no-repeat top center;
      position: relative;
    }
    .bottom-bar{
      position: absolute;
      bottom: 0;
      width: 100%;
      background: rgba(0,0,0,0.7);
        height: 50px;
    }
    .showreel {
        width: 960px;
        margin: 0 auto;
        text-align: left;
        font-size: 15px;
        color: #ffffff;
    }

    .seemore,
    .seeour{
      display: inline-block;
    }

    .seeour {
        float: right;
    }

CSS - 定位文字和图标

2 个答案: