返回

html-在CSS中的相对和绝对定位,以创建特定的设计

发布时间:2022-07-26 05:44:33 1106
# css

我是 CSS 新手,我正在尝试创建一个设计。设计是在盒子的左侧有“标题”。我尝试了相对定位和绝对定位,但是我不能在没有段落覆盖的情况下将“标题”放在左侧(我尝试相对于其原始位置偏移“标题”,但是当屏幕尺寸发生变化时它超出了框)。你能帮我解决这个问题吗?

<style>

/********** Base styles **********/

* {

  box-sizing: border-box;

}

h1 {

  margin-bottom: 15px;

}

p {

  border: 1px solid black;

  background-color: gray;

  width: 90%;

  margin: 40px;

  margin-right: auto;

  margin-left: auto;

  font-family: Helvetica;

  color: black;

  position: relative;

}

/* Simple Responsive Framework. */

.row {

  /*text-align: justify;

  margin-left: auto;

  margin-right: auto;*/

  

  width: 100%;

}

span{

  width: 100px;

  height: 25px;

  border: 2px solid black;

  background-color: red;

  position: relative;

  left: 0px;

  display: block;

  clear: left;

 

}

/********** Large devices only **********/

@media (min-width: 1200px) {

  .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {

    float: left;

  }

  .col-lg-1 {

    width: 8.33%;

  }

  .col-lg-2 {

    width: 16.66%;

  }

  .col-lg-3 {

    width: 25%;

  }

  .col-lg-4 {

    width: 33.33%;

  }

  .col-lg-5 {

    width: 41.66%;

  }

  .col-lg-6 {

    width: 50%;

  }

  .col-lg-7 {

    width: 58.33%;

  }

  .col-lg-8 {

    width: 66.66%;

  }

  .col-lg-9 {

    width: 74.99%;

  }

  .col-lg-10 {

    width: 83.33%;

  }

  .col-lg-11 {

    width: 91.66%;

  }

  .col-lg-12 {

    width: 100%;

  }

}

/********** Medium devices only **********/

@media (min-width: 992px) and (max-width: 1199px) {

  .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {

    float: left;

  }

  .col-md-1 {

    width: 8.33%;

  }

  .col-md-2 {

    width: 16.66%;

  }

  .col-md-3 {

    width: 25%;

  }

  .col-md-4 {

    width: 33.33%;

  }

  .col-md-5 {

    width: 41.66%;

  }

  .col-md-6 {

    width: 50%;

  }

  .col-md-7 {

    width: 58.33%;

  }

  .col-md-8 {

    width: 66.66%;

  }

  .col-md-9 {

    width: 74.99%;

  }

  .col-md-10 {

    width: 83.33%;

  }

  .col-md-11 {

    width: 91.66%;

  }

  .col-md-12 {

 

    width: 100%;

  }

}

</style>

<h1>Responsive Layout</h1>

<div class="row">

  <section class="ele col-lg-4 col-md-6">

        <p class="par"> 

          <span>title</span>

          Chicken meal is rendered chicken meat that has been dried and ground up, and includes clean flesh, skin, and/or accompanying bone. But if you see a bag of dog food that proudly states it's made with “Real Chicken,” it's referring to a clean combination of chicken flesh and skin. 

    </p>

  </section>

  <section class="ele col-lg-4 col-md-6">

   <p p class="par"> head 2 Item 2</p>

  </section>

  <section class="ele col-lg-4 col-md-12">

   <p class="hea"> head 3 Item 3</p>

  </section>

</div>

特别声明:以上内容(图片及文字)均为互联网收集或者用户上传发布,本站仅提供信息存储服务!如有侵权或有涉及法律问题请联系我们。
举报
评论区(2)
按点赞数排序
用户头像
下一篇
在Azure ML中安装R软件包 2022-07-26 03:51:33