Question

我希望我的网页有三种不同的布局，用于不同的浏览器宽度（即桌面，平板电脑，手机）。在平板电脑布局中（浏览器的768px和991px之间）我应该有三个元素，第一行中有两个元素（因此每个元素占浏览器宽度的6/12）和第二行中的第三个元素（占12 /浏览器宽度的12）。这就是我要的： What I want - IMAGE 但是这个布局有问题：如您所见，我无法将第三个元素边框与第一个和第二个元素的左右边框对齐。这就是我所做的： What I have - IMAGE 你能帮助我吗？注意：我想要元素＆＃39; 3＆＃39;广泛的＆＃39; 1＆＃39; +＆＃39; 2＆＃39;宽度仅适用于平板电脑布局！对于其他布局，我想要我已经做过的，即每个元素（1,2或3）的宽度相同。

这是html：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Our Menu</title>
<link rel ="stylesheet" href="css/style.css">
</head>
<body>
<h1>Our Menu</h1>

<div class="row">
  <div class="col-lg-4 col-md-6 col-sd-12 anchor">
    <p class="content"> In girum imus nocte et consimur igni.</p>
    <p class="my-title" id="p1"> Chicken</p>
  </div>
  <div class="col-lg-4 col-md-6 col-sd-12 anchor">
    <p class="content"> In girum imus nocte et consimur igni.</p>
    <p class="my-title" id="p2">  Beef</p>
  </div>
  <div class="col-lg-4 col-md-12 col-sd-12 anchor">
    <p class="content"> In girum imus nocte et consimur igni.</p>
    <p class="my-title" id="p3"> Sushi</p>
  </div>
</div>

</body>
</html>

这是css：

/* width and height will include border and padding */
* {
  box-sizing: border-box;
}
h1 {
  margin-bottom: 15px;
  text-align: center;
}

/*Set an anchor for the container of p elements*/
div.anchor{
  position: relative;
}

#p1{
  background-color: yellow;
}
#p2{
  background-color: #ff0000;
}
#p3{
  background-color: #ffaabb;
}

 /*.col-md-12 .content{
  margin-right: 2.5%;
  margin-left:  2.5%;
  */


p.content{
  border: 1px solid black;
  background-color: #a3d3d3;
  /*width: 90%; /*Specifies a percentage width. The percentage is calculated with respect to the width of the generated box's containing block.*/
  height: 150px;
  margin-right: 5%; 
  margin-left:  5%;
  font-family: Helvetica;
  color: white;
  padding: 20px;
}

p.my-title{
  position: absolute;
  top:  0px;
  right: 0px;

  width: 80px;
  height: 20px;
  margin: 0px;
  border: 1px solid black; 
  text-align: center;
  margin-right: 5%;/*inherit; 22.525px; inherit*/
  margin-top: 16px;
   /*margin-right: auto;
  margin-left: auto;
  font-family: Helvetica;*/
  color: black;
}


/* Simple Responsive Framework. */
.row {
  width: 100%;
}
/********** desktop devices only **********/
@media (min-width: 992px) {
  .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4 {
    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%;
  }
}
/********** Tablet devices only **********/
@media (min-width: 768px) and (max-width: 991px) {
  .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-12 {
    float: left;
  }
  .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-12 {
    width: 100%;
    /*margin-right: -5.5%;
    margin-left:  -2.8%;*/
  }
}

/********** mobile devices only **********/
/* the floating is only defined inside the media queries. 
The elements will behave just like regular block level elements,
and they will automatically stack one on top of the other.
Anyway, it's better to explicit define the media query also for
mobile phones. */

@media (max-width: 767px) {
  .col-sd-9, .col-sd-10, .col-sd-11, .col-sd-12 {
    float: left;
  }
  .col-sd-9 {
    width: 74.99%;
  }
  .col-sd-10 {
    width: 83.33%;
  }
  .col-sd-11 {
    width: 91.66%;
  }
  .col-sd-12 {
    width: 100%;
  }
}

谢谢！

Answer 1

检查此fiddle

div.anchor{
  position: relative;
  padding: 0 15px;
}

p.content{
  border: 1px solid black;
  background-color: #a3d3d3;
  /*width: 90%; /*Specifies a percentage width. The percentage is calculated with respect to the width of the generated box's containing block.*/
  height: 150px;
  /* margin-right: 5%; 
  margin-left:  5%; */
  font-family: Helvetica;
  color: white;
  padding: 20px;
}

p.my-title{
  position: absolute;
  top:  16px;
  right: 15px;
  width: 80px;
  height: 20px;
  margin: 0px;
  border: 1px solid black; 
  text-align: center;
/*   margin-right: 5%;inherit; 22.525px; inherit
  margin-top: 16px; */
   /*margin-right: auto;
  margin-left: auto;
  font-family: Helvetica;*/
  color: black;
}

编辑：在p.content和p.my-title左右移除了保证金，padding上的div.anchor以及top上的right和p.my-title位置< / p>

如何水平对齐平板布局的元素？

1 个答案: