Question

我在尝试创建如下图所示的布局时遇到了一些麻烦。左侧和右侧列应分别占主容器最大宽度的2/3和1/3（使用margin: auto;居中），但页面的剩余宽度应由背景图像填充或列的颜色。

有没有办法用css完成这个？

Answer 1

这有点棘手。

问题是避免背景图像被裁剪出页面主体，而简单的颜色填充更容易。尝试将:before和position:absolute;伪元素与#left-column{ float:left; width: 66.66%; height:200px; position:relative; } #left-column:before{ position:absolute; /* for this example I used a free-copyright image from pixabay.com */ background:url(https://pixabay.com/static/uploads/photo/2016/05/01/00/57/barn-1364280_960_720.jpg) no-repeat; background-size: 100% 100%; top:0; right:0; width:100%; padding-left:100%; height:100%; content:''; display:block; } #right-column{ height:200px; float:left; width:33.33%; position:relative; } #right-column:after{ position:absolute; background:green; top:0; left:0; width:10000px; height:100%; content:''; display:block; }一起使用并将背景规则放在那里。

然后你需要强制适应所有分辨率的所有页面，所以请尝试以下规则：

position:relative; z-index:1;

要显示列中的内容，请为其提供body{ overflow-x:hidden; }。

然后，您需要向主体添加以下规则，以避免该背景创建水平滚动条

        @if ( Session::get('message') != '' )
        <div class='alert alert-warning'>
            {{ Session::get('message') }}
        </div>  
        @endif 

        <p class="login-box-msg">Login untuk masuk</p>
        <form action="{{ action('LoginController@postLogin') }}" method="post">
          <input type="hidden" name="_token" value="{{ csrf_token() }}" />
          <div class="form-group has-feedback">
            <input type="text" class="form-control" name='email' required placeholder="Email"/>
            <span class="glyphicon glyphicon-user form-control-feedback"></span>
          </div>
          <div class="form-group has-feedback">
            <input type="password" class="form-control" name='password' required />
            <span class="glyphicon glyphicon-lock form-control-feedback"></span>
          </div>
          <div class="row">
            <div class="col-xs-8 hide">    
              <div class="checkbox icheck">
                <label>
                  <input type="checkbox"> Remember Me
                </label>
              </div>                        
            </div><!-- /.col -->
            <div class="col-xs-4">
              <button type="submit" class="btn btn-primary btn-block btn-flat">Sign In</button>
            </div><!-- /.col -->
          </div>
        </form>

        <br/>
        <!--a href="#">I forgot my password</a-->

      </div><!-- /.login-box-body -->
    </div><!-- /.login-box -->

要在工作示例中查看，请转到here。

如果您更喜欢更准确的解决方案，我认为您必须使用 javascript

Answer 2

您可以使用宽度较大的伪元素来模拟它：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

p {
  margin-bottom: 16px;
}

.wrapper {
  overflow-x: hidden;
  min-height: 100vh;
}

.container {
  border-left: 1px solid #ddd;
  border-right: 1px solid #ddd;
  max-width: 800px;
  height: 700px;
  margin: 0 auto;
}

.cols {
  min-height: 300px;
  display: flex;
}

.left {
  background: linear-gradient(to right, #F9B80E, #E3342E);
  flex: 0 0 66.6%;
  position: relative;
}

.left:before {
  content: '';
  background: linear-gradient(to right, #FFED21, #F9B80E);
  position: absolute;
  right: 100%;
  width: 1000px;
  top: 0;
  bottom: 0;
}

.right {
  background: #E5E5E4;
  position: relative;
  padding: 20px;
}

.right:after {
  content: '';
  background: #E5E5E4;
  position: absolute;
  left: 100%;
  width: 1000px;
  top: 0;
  bottom: 0;
}

<div class="wrapper">
  <div class="container">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae, quam. Dolore unde repudiandae deleniti, explicabo voluptatum, consequatur soluta architecto cumque! Modi sit doloremque veniam dignissimos porro nulla, exercitationem illum possimus!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae, quam. Dolore unde repudiandae deleniti, explicabo voluptatum, consequatur soluta architecto cumque! Modi sit doloremque veniam dignissimos porro nulla, exercitationem illum possimus!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae, quam. Dolore unde repudiandae deleniti, explicabo voluptatum, consequatur soluta architecto cumque! Modi sit doloremque veniam dignissimos porro nulla, exercitationem illum possimus!</p>
    <div class="cols">
      <div class="left"></div>
      <div class="right">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat esse, corporis, quis accusantium, adipisci sequi animi cupiditate distinctio blanditiis consequuntur illo molestias velit dolorem qui sit voluptas. Labore cupiditate, quis.</p>
      </div>
    </div>
  </div>
</div>

使容器尊重网格但填充剩余空间

2 个答案: