Question

如何将我的网页划分为这样（堆叠在手机上）？最好使用自举，但不一定

这是我的html代码（这是我要分开的部分）：

<section>
    <div class="kj">
        <h3>The event and rules</h3>
    </div>
    <div class="kjb">
        <!--DIVIDE THIS PART-->
    </div>
</section>

我的CSS代码：

 .kj {
 width: auto;
 margin: auto;
 text-align: center;
 padding-top: 10%;
 }
 h3 {
 font-size: 7.0vw;
 color: #BDADAC;
 }
.kjb {
width: 60%;
text-align: center;
margin-left: 20%;
max-height: 80%;
padding-top: 3%;
}

Answer 1

试试这个：

<section>
  <div class="row">
    <div class="kj col-lg-12 col-md-12 col-sm-12 col-xs-12">
      <h1 class="text-center">The event and rules</h1>
      <h3 class="text-center">Event 1</h3>
      <div class="row">
        <div class="col-lg-3 col-md-3 col-sm-3 col-xs-2"></div>
        <div class="col-lg-6 col-md-6 col-sm-6 col-xs-8">Lorem ipsum Nostrud et in commodo pariatur deserunt culpa voluptate irure deserunt nulla et incididunt fugiat sit ullamco nostrud minim sed non laborum. Lorem ipsum Ut amet fugiat dolor do aliqua et commodo dolore voluptate ad Duis labore consectetur Duis laborum pariatur consectetur Ut amet laborum irure reprehenderit nisi nostrud fugiat ad qui in aliquip ea.
        </div>
        <div class="col-lg-3 col-md-3 col-sm-3 col-xs-2"></div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="kjb">
     <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
       <h3 class="text-center">Event 2</h3>
       <div class="row">
        <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2"></div>
        <div class="col-lg-10 col-md-10 col-sm-10 col-xs-8">Lorem ipsum Dolor veniam culpa laborum nulla est consectetur anim tempor incididunt mollit aliqua sit cupidatat elit minim nostrud qui pariatur tempor amet non magna aliqua irure sed veniam consequat voluptate labore. Lorem ipsum Quis Ut minim consequat est sed elit veniam quis dolor est culpa quis amet cillum do enim do consequat id sint ea esse commodo ut qui reprehenderit esse veniam ullamco ex commodo velit magna voluptate.
        </div>
        <div class="col-xs-2"></div>
      </div>
    </div>
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
      <h3 class="text-center">Event 3</h3>
      <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2"></div>
      <div class="col-lg-10 col-md-10 col-sm-10 col-xs-8">Lorem ipsum Aliquip deserunt magna fugiat ullamco do mollit tempor sunt dolor amet et irure incididunt ad adipisicing sunt aliquip tempor eiusmod adipisicing in irure magna ex reprehenderit aliqua culpa ea irure labore voluptate. Lorem ipsum Esse velit do tempor ea id sint culpa amet ad veniam sit irure cillum laborum dolore esse ut quis consectetur ex quis nostrud.</div>
      <div class="col-xs-2"></div>
    </div>
  </div>
</div>
</section>

Jsfiddle: 如果你想获得边框

，请添加自己的类

Answer 2

如果你使用bootstrap，你应该创建两个div容器，例如col-sm-6类：

<section>
<div class="kj">
    <h3>The event and rules</h3>
</div>
<div class="kjb col-sm-6">
    <button class="register">
        Register
    </button>
</div>
<div class="kjb col-sm-6">
    right side
</div>
</section>

请参阅：http://getbootstrap.com/examples/grid/

我编辑了我的代码....你必须复制div容器kjb并添加bootstrap类

Answer 3

使用@Sarjan

建议的引导程序

没有bootstrap（与bootstrap css相同）

*{
    box-sizing:border-box;
} 
section:after{
    display:table;
    content:" ";
    clear:both;
}
.kj{
    width:100%;
    float:left;
    border:1px solid #ccc;
}
.kjb{
    width:50%;
    border:1px solid #ccc;
    float:left;
}

Answer 4

我会尝试这个：

<section>
    <div class="kj">
        <h3>The event and rules</h3>
    </div>
    <div class="kjb row">
        <!--DIVIDE THIS PART-->
        <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
            Left
        </div>
        <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
            Right
        </div>
    </div>
</section>

用线条划分网页

4 个答案: