Question

我在整个屏幕的宽度上创建了两个矩形（所以没有<div class="container">）。我已经使用过bootstrap了。

现在，为了让这些矩形的内容仍在页面中间，左侧部分（col-sm-5）有width:calc(1170px / 12 * 5)，右侧部分也相应width:calc(1170px / 12 * 7);

右侧部分看起来很好，但我需要将左侧部分放在容器的左侧。

float:right不起作用， position:absolute; right:0;让它看起来完全错误。

代码：

<div>
 <div class="row equal">
      <div class="col-sm-5 double-left">
           <section class="double-left">
           Left side
           </section>
      </div>
      <div class="col-sm-7 double-right">
           <section class="double-right">
           Right side
           </section>       
      </div>
 </div>
</div>

CSS：

div.double-left {background:#4aaaa5;}
div.double-right {background:#35404f;}

section.double-left {
  width:calc(1170px / 12 * 5);
  position:relative;
  float:right;
}

section.double-right {
  width:calc(1170px / 12 * 7);
}

.equal, .equal > div[class*='col-'] {  
   display: -webkit-box;
   display: -moz-box;
   display: -ms-flexbox;
   display: -webkit-flex;
   display: flex;
   flex:1 0 auto;
}

PS。我使用.equal使列具有相同的高度。

提前谢谢！

Answer 1

试试这个

section.double-left {
    position: relative;
    text-align: right;
    width: 100%;
}

因为它在col-sm-5中并且它只有一个子元素，所以你可以将宽度放在100％（填充所有空格），text-align将使文本向右浮动

Bootrstrap列中的浮动部分

1 个答案: