HTML：

Question

我的页面有三个包含文字的方框。

在完整尺寸下，框中有太多空白区域，但如果我更改高度或边距，则当浏览器窗口变小时，没有足够的空间。

我可以将文字链接到框中，以便它们一起变大和变小吗？

应该是这样的： Desktop, tablet, and mobile browser sizes

Mine looks like this: - 平板电脑视图中框之间的垂直空间太大 - 每个视图中全尺寸框中的空格太多

＆＃13;

********** Base styles **********/
* {
  box-sizing: border-box;
}

header {
  text-align: center;
  margin-top: 50px;
  margin-bottom: 30px;
  font: 175% helvetica;
}

p {
  border: 1px solid black;
  height: 130px;
  /*margin-left: 10px;
  margin-right: 10px;*/
  background-color: #b3b3b3;
  padding: 50px 12px 75px 20px;
  font-size: 125%;
}

#p1 {
  margin-left: 13px;
  margin-right: 13px;
}

#p2 {
  margin-left: 13px;
  margin-right: 13px;
}

#p3 {
  margin-left: 13px;
  margin-right: 13px;
}

body { 
  margin-left: 26px;
  margin-right: 26px;
  padding:0;
}
#label1 {
  height: 30px;
  width: 120px;
  border-left: 1px solid black;
  border-bottom: 1px solid black;
  border-right: none;
  border-top: none;
  background-color: #ff6666;
  padding: 10px 10px 0px 5px;
  text-align: center;
  margin: 0px;
  float: right;
  position: relative;
  top: -276px;
  left: -14px;

}

#label2 {
  height: 30px;
  width: 120px;
  border-left: 1px solid black;
  border-bottom: 1px solid black;
  border-top: none;
  border-right: none;
  background-color:  #ffffb3;
  padding: 10px 10px 0px 5px;
  text-align: center;
  margin: 0px;
  float: right;
  position: relative;
  top: -276px;
  left: -14px;
}

#label3 {
  height: 30px;
  width: 120px;
  border-left: 1px solid black;
  border-bottom: 1px solid black;
  border-top: none;
  border-right: none;
  background-color:  #ff99ff;
  padding: 10px 10px 0px 5px;
  text-align: center;
  margin: 0px;
  float: right;
  position: relative;
  top: -276px;
  left: -14px;
}
/* Simple Responsive Framework. */
.row {
  width: 100%;
  
}

/********** DESKTOP **********/
@media (min-width: 992px) {
  .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%;
  }
}

/********** TABLET **********/
@media (min-width: 768px) and (max-width: 991px) {
  .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%;
  }
}

/********** MOBILE **********/
@media (max-width: 0px) and (max-width: 767px) {
  .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
    float: left;
  }
  .col-sm-1 {
    width: 8.33%;
  }
  .col-sm-2 {
    width: 16.66%;
  }
  .col-sm-3 {
    width: 25%;
  }
  .col-sm-4 {
    width: 33.33%;
  }
  .col-sm-5 {
    width: 41.66%;
  }
  .col-sm-6 {
    width: 50%;
  }
  .col-sm-7 {
    width: 58.33%;
  }
  .col-sm-8 {
    width: 66.66%;
  }
  .col-sm-9 {
    width: 74.99%;
  }
  .col-sm-10 {
    width: 83.33%;
  }
  .col-sm-11 {
    width: 91.66%;
  }
  .col-sm-12 {
    width: 100%;
  }
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Simple restaurant webpage">
<meta name="keywords" content="restaurant">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/index.css">
<title>Assignment 2</title>
</head>


<body>
<header>Our Menu</header>

<div class="row">
	<div class="col-lg-4 col-md-6 col-sm-12"><p id="p1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
	quis nostrud exercitation ullamco laboris nisi ut aliquip ex</p><p id="label1">Beef</p></div>
	<div class="col-lg-4 col-md-6 col-sm-12"><p id="p2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
	quis nostrud exercitation ullamco laboris nisi ut aliquip ex</p><p id="label2">Chicken</p></div>
	<div class="col-lg-4 col-md-12"><p id="p3">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
	quis nostrud exercitation ullamco laboris nisi ut aliquip ex</p><p id="label3">Pork</p></div>
</div>
</body>
</html>

＆＃13;

Answer 1

每个方框都有一个设定的高度，适用于桌面版本，但不能缩小它。

将每个框高度设置为＆＃34;自动＆＃34; 而不是 ＆＃34; 130px＆＃34; 并调整相应地在每个盒子上填充。

与您的问题无关：此外，如果您的元素具有相同的属性（＃p1，＃p2，＃p3，＃label1，＃label2，＃label3），您只需使用div类而不是每个元素的单个ID。（查看我的codepen以供参考：http://codepen.io/johndurso/pen/xgLZEw/）

HTML：

<div class="row">
    <header>Our Menu</header>
</div>

<div class="row">
    <div class="col-lg-4 col-md-6 col-sm-12">
        <div class="title" style="background-color: #ff6666;">Chicken</div>
        <p class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, uis nostrud exercitation ullamco laboris nisi ut aliquip ex</p>
    </div>

    <div class="col-lg-4 col-md-6 col-sm-12">
        <div class="title" style="background-color: #ffffb3;">Beef</div>
        <p class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, uis nostrud exercitation ullamco laboris nisi ut aliquip ex</p>
    </div>

    <div class="col-lg-4 col-md-12">
        <div class="title" style="background-color: #ff99ff;">Pork</div>
        <p class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, uis nostrud exercitation ullamco laboris nisi ut aliquip ex</p>
    </div>
</div>
</body>

CSS：

header {
  text-align: center;
  margin: 50px 0;
  font: 28px helvetica;
}

div {
  position: relative;
}

p.description {
  border: 1px solid black;
  height: auto;
  background-color: #b3b3b3;
  padding: 50px 10px 10px;
  font-size: 20px;
    margin: 0 10px 10px 0;
}

.title {
  position: absolute;
  top: 0px;
  right: 10px;
    padding: 10px 50px;
  border: 1px solid black;
  background-color: #ff6666;
  text-align: center;
}

body { 
  margin: 0 26px;
  padding:0;
}
/* Simple Responsive Framework. */
.row {
  width: 100%;
}

/********** DESKTOP **********/
@media (min-width: 992px) {
  .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%;
  }
}

/********** TABLET **********/
@media screen and (max-width: 991px) {
  .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%;
  }
}

/********** MOBILE **********/
@media screen and (max-width: 767px) {
  .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
    float: left;
  }
  .col-sm-1 {
    width: 8.33%;
  }
  .col-sm-2 {
    width: 16.66%;
  }
  .col-sm-3 {
    width: 25%;
  }
  .col-sm-4 {
    width: 33.33%;
  }
  .col-sm-5 {
    width: 41.66%;
  }
  .col-sm-6 {
    width: 50%;
  }
  .col-sm-7 {
    width: 58.33%;
  }
  .col-sm-8 {
    width: 66.66%;
  }
  .col-sm-9 {
    width: 74.99%;
  }
  .col-sm-10 {
    width: 83.33%;
  }
  .col-sm-11 {
    width: 91.66%;
  }
  .col-sm-12 {
    width: 100%;
  }
}

简单的响应式网页分配 - 段落框太大而不是太小

1 个答案:

HTML：

CSS：