На моей странице есть три коробки с текстом в них.Простое удобное задание веб-страницы - слишком большие ящики с абзацем, но слишком маленькие
В полноразмерных размерах в коробках слишком много свободного места, но если я изменяю высоту или поля, места в окне браузера становится меньше.
Могу ли я связать текст с коробкой, чтобы они стали больше и меньше вместе?
должен выглядеть, как эти: Desktop, tablet, and mobile browser sizes
Mine looks like this: - слишком много места по вертикали между коробками с точки зрения планшета - слишком много пустого пространства в коробках в полном размере в каждом из видов
********** 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%;
}
}
<!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">
\t <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
\t tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
\t quis nostrud exercitation ullamco laboris nisi ut aliquip ex</p><p id="label1">Beef</p></div>
\t <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
\t tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
\t quis nostrud exercitation ullamco laboris nisi ut aliquip ex</p><p id="label2">Chicken</p></div>
\t <div class="col-lg-4 col-md-12"><p id="p3">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
\t tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
\t quis nostrud exercitation ullamco laboris nisi ut aliquip ex</p><p id="label3">Pork</p></div>
</div>
</body>
</html>
Спасибо. Замечательно. Одна вещь: ширина названия курицы длиннее, чем две другие. Я поиграю с этим. – ntf