使用引导程序平衡图像的文本叠加

时间：2017-01-26 17:32:58

标签： html css twitter-bootstrap

我有一行有三个图像和文本覆盖它们。我似乎无法让文本的左右两侧在不同的部分中保持平衡。它应该是这样的：

enter image description here

我能够正确设置左侧的文字，但无法平衡右侧的文字，并在各个部分之间设置垂直管道，并带有右边框或左边框。

＆＃13;
＆＃13; 
     .practice-areas {
      h1 {
        font-weight: 600;
        font-size: 60px;
        font-family: 'Open Sans Condensed';
        text-transform: uppercase;
        color: #ffffff;
        position: absolute;
        bottom: 10%;
        left: 50%;
        -moz-transform: translateX(-50%) translateY(-50%);
        -webkit-transform: translateX(-50%) translateY(-50%);
        transform: translateX(-50%) translateY(-50%);
        -webkit-font-smoothing: antialiased;
      }
      h5 {
        text-transform: uppercase;
        color: #ffffff;
        position: absolute;
        bottom: 10%;
        left: 65%;
        -moz-transform: translateX(-50%) translateY(-50%);
        -webkit-transform: translateX(-50%) translateY(-50%);
        transform: translateX(-50%) translateY(-50%);
        -webkit-font-smoothing: antialiased;
      }
      p {
        font-family: 'Open Sans Condensed';
        font-size: 20px;
        text-transform: uppercase;
        color: #ffffff;
        position: absolute;
        bottom: 10%;
        left: 55.4%;
        -moz-transform: translateX(-50%) translateY(-50%);
        -webkit-transform: translateX(-50%) translateY(-50%);
        transform: translateX(-50%) translateY(-50%);
        -webkit-font-smoothing: antialiased;
      }
      .result {
        color: $grey;
        bottom: 7%;
        font-size: 16px;
        right: 38%;
      }
      .square-1 {
        background-image: url('https://placeholdit.imgix.net/~text?txtsize=33&w=350&h=150');
        background-size: cover;
        height: 413px;
        @include breakpoint(xsmin) {
          height: 213px;
        }
      }
      .square-2 {
        background-image: url('https://placeholdit.imgix.net/~text?txtsize=33&w=350&h=150');
        background-size: cover;
        height: 413px;
        @include breakpoint(xsmin) {
          height: 213px;
        }
      }
      .square-3 {
        background-image: url('https://placeholdit.imgix.net/~text?txtsize=33&w=350&h=150');
        background-size: cover;
        height: 413px;
        @include breakpoint(xsmin) {
          height: 213px;
        }
      }
    }
＆＃13; 
     <div class="row practice-areas">
      <div class="row practice-areas">
        <div class="col-lg-12">
          <div class="col-lg-4 square-1">
            <div class="left">
              <h1 class="amount">$90.2</h1>
              <p class="million">million</p>
              <p class="result">text</p>
            </div>
            <div class="right">
              <h5 class="case">COMPANY NAME</h5>
            </div>
          </div>
          <div class="col-lg-4 square-2">
            <h1>$90.2</h1>
            <p>million</p>
            <p class="result">company</p>
          </div>
          <div class="col-lg-4 square-3">
            <h1>$90.2</h1>
            <p>million</p>
            <p class="result">COMPANY</p>
          </div>
        </div>
      </div>
    </div>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：1)

如果您使用bootstrap V3，那么它将是这样的。我不知道你使用的是Bootstrap 3或4.你的HTML结构是不正确的。

@import url("https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700");
.practice-areas h1 {
  font-weight: 600;
  font-size: 60px;
  font-family: 'Open Sans Condensed';
  text-transform: uppercase;
  color: #ffffff;
  line-height: 35px;
  margin-bottom: 10px;
  margin-top: 0;
  text-align: right;
  -webkit-font-smoothing: antialiased;
}

.practice-areas h5 {
  text-transform: uppercase;
  color: #ffffff;
  font-family: 'Open Sans Condensed';
  margin-top: 0;
  margin-bottom: 0;
  text-align: left;
  -webkit-font-smoothing: antialiased;
}

.practice-areas p {
  font-family: 'Open Sans Condensed';
  font-size: 20px;
  line-height: 20px;
  text-transform: uppercase;
  margin-bottom: 0;
  text-align: right;
  color: #ffffff;
  -webkit-font-smoothing: antialiased;
}

.practice-areas .result {
  color: #f6f6f6;
  font-size: 16px;
}

.practice-areas .square-1 {
  background-image: url("https://placeholdit.imgix.net/~text?txtsize=33&w=350&h=150");
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height: 300px;
}

.practice-areas .square-2 {
  background-image: url("https://placeholdit.imgix.net/~text?txtsize=33&w=350&h=150");
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height: 300px;
}

.practice-areas .square-3 {
  background-image: url("https://placeholdit.imgix.net/~text?txtsize=33&w=350&h=150");
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height: 300px;
}

.practice-areas .square {
  bottom: 20px;
  display: table;
  left: 0;
  position: absolute;
  width: 100%;
}

.practice-areas .square-1,
.practice-areas .square-2,
.practice-areas .square-3 {
  -webkit-transition: background-color 0.3s ease-in-out 0s;
  -o-transition: background-color 0.3s ease-in-out 0s;
  -moz-transition: background-color 0.3s ease-in-out 0s;
  transition: background-color 0.3s ease-in-out 0s;
}

.practice-areas .square-1:hover, .practice-areas .square-1:focus,
.practice-areas .square-2:hover,
.practice-areas .square-2:focus,
.practice-areas .square-3:hover,
.practice-areas .square-3:focus {
  background-color: #FAE2E1;
  background-image: none;
}

.practice-areas .square-1 .left,
.practice-areas .square-1 .right,
.practice-areas .square-2 .left,
.practice-areas .square-2 .right,
.practice-areas .square-3 .left,
.practice-areas .square-3 .right {
  display: table-cell;
  height: auto;
  text-align: center;
  padding-left: 15px;
  padding-right: 15px;
  vertical-align: top;
  width: 50%;
}

.practice-areas .square-1 .left,
.practice-areas .square-2 .left,
.practice-areas .square-3 .left {
  border-right: 1px solid #ffffff;
}

.practice-areas .square-1 .right,
.practice-areas .square-2 .right,
.practice-areas .square-3 .right {
  border-left: 1px solid #ffffff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row practice-areas">
    <div class="col-sm-4 square-1">
      <div class="square">
        <div class="left">
          <h1 class="amount">$90.2</h1>
          <p class="million">million</p>
          <p class="result">text</p>
        </div>
        <div class="right">
          <h5 class="case">COMPANY NAME</h5>
        </div>
      </div>
    </div>
    <div class="col-sm-4 square-2">
      <div class="square">
        <div class="left">
          <h1 class="amount">$90.2</h1>
          <p class="million">million</p>
          <p class="result">text</p>
        </div>
        <div class="right">
          <h5 class="case">COMPANY NAME</h5>
        </div>
      </div>
    </div>
    <div class="col-sm-4 square-3">
      <div class="square">
        <div class="left">
          <h1 class="amount">$90.2</h1>
          <p class="million">million</p>
          <p class="result">text</p>
        </div>
        <div class="right">
          <h5 class="case">COMPANY NAME</h5>
        </div>
      </div>
    </div>
  </div>
</div>

答案 1 :(得分：0)

Flexbox救援。我构建了每个部分，如下所示。其余的通过css应用。

<div class="wrap">
    <div class="left">
        <h1 class="amount">$90.2</h1>
        <p class="million">million</p>
        <p class="result">text</p>
    </div>
    <div class="right">
        <h5 class="case">COMPANY NAME</h5>
        <p class="lipsum">lipsum</p>
        <p class="date">date</p>
    </div>
</div>

https://jsfiddle.net/ke5octvj/

相关问题
最新问题